Реферат: Графика на Web-страницах

В 1990 году Объединенной группой экспертов в области фотографии (JointPhotographicExpertGroup, JPEG) была предложена схема сжатия, которая впоследствии завоевала всеобщее признание, как стандартный метод обработки неподвижных изображений. JPEG – это алгоритм сжатия изображений. Но общепринятым стало применение названия JPEG к файлам, записанным в формате JFIF (JPEGFileInterchangeFormat). JPEG (или JFIF) – это формат записи изображений, применяемых как на Интернет-сайтах, так и для типографской печати, а также в цифровой фотографии.

Процесс компрессии изображения в формате JPEG идет в несколько этапов:

1) Если нужно, то сначала происходит конвертация данных о точках изображения из системы RGB в систему YCbCr, которая аналогична HSL, позволяет выразить яркость цвета.

2) Уменьшение в два раза ширины шкалы Cb и Cr (свойства цвета) при сохранении оригинальной шкалы яркости Y. Сужение шкалы происходит путём усреднения значений Cb и Cr соседних пикселей.

3) Анализ блоков изображения: 8*8 пикселей. С помощью дискретного косинусного преобразования (ДКП) производится округление значений изменения яркости цвета.

4) Массив данных, которым приближённо описывается оригинальное изображение, может быть подвергнут очередной компрессии (на этот раз безутратной), поскольку в результате округления появилось много одинаковых значений.

Выгодой алгоритма компрессии, применяемого в формате JPEG, особенно ощутим при обработке больших многоцветных изображений (например, фотоснимков). Для малых изображений (иконок) или картинок с преобладанием одного цвета лучше применять формат GIF.

Формат JPEG не поддерживает чересстрочную загрузку, но здесь есть возможность записи файла в прогрессивной форме. Просмотр крупного файла, записанного в прогрессивной форме JPEG, предполагает быстрое отображение картинки худшего качества, постепенное улучшение которого происходит по мере считывания очередных порций файловой информации. Это имеет большое значение для тех, кто публикует фотоснимки, карты и т.п. Быстрый просмотр картинки немного худшего качества даёт возможность решить, стоит ли ожидать дальнейшей загрузки, или можно прервать передачу изображения в браузер.

· BMP

Формат BMP (Bitmap, Битовая карта) является очень простым способом записи графики для применения в системе Windows.

Вообще, этот формат в Интернете не применяется. BMP – это внутренняя графическая система Windows. В частности, в этом формате записываются «копии экрана». Достаточно нажать клавиши <Alt+PrintScreen>, чтобы в системном буфере оказалось изображение, в данный момент находящееся на экране. В формате BMP не предполагается компрессия данных, вернее, могут быть скопрессированы только элементы 4- и 8-битовой графики. В таких случаях архивация данных происходит по принципу групповой компрессии – оттискивания соседних точек одинакового цвета и замещение последовательности идентичных данных парой значений, представляющих индекс цвета на палитре и количество пикселей данного цвета в последовательности. При отсутствии компрессии размер файлов, записанных в этом формате, очень велик. К тому же этот формат не поддерживается многими браузерами, а это значит, что часть интернавтов не увидит у себя на экране картинки, записанной в формате BMP. Этот формат конкретно поддерживает InternetExplorer. Существенный недостаток формата BMP – слишком большой размер создаваемых файлов.

· PNG

PNG (PortableNetworkGraphics – Переносимая сетевая графика) – универсальный формат записи неподвижных (статичных) изображений. Он с успехом применяется в отношении как фотоснимков, так и небольших рисунков. По глубине отображения цвета формат PNG превосходит GIF и JPEG, так как цвет каждого пикселя здесь может быть определён с помощью 48 битов. PNG применяет алгоритм компрессии без потерь, а прозрачность фона может иметь достаточно много (до 256) степеней. Изображения, записанные в формате PNG, корректно отображаются всеми браузерами. Сам формат был разработан в 1996 году как альтернатива GIF, но пока не получил большой популярности. Одной из причин этого стало то обстоятельство, что форма PNG не позволяет записывать анимацию, которую так любят использовать создатели Интернет-сайтов.

· SVG

Формат SVG (ScalableVectorGraphics – Масштабируемая векторная графика) представляет собой стандарт, разработанный организацией WorldWideWebConsortium (W3C) для записи векторной графики языком XML. В отличие от форматов, описанных выше, SVG дает возможность записи векторной графики, а это значит, что масштабирование изображения будет происходить без потери качества.

· ICO

Иконки, сопровождающее любой программный продукт и любой файл в системе Windows, также являются графическими файлами. Хотя эти маленькие рисунки очень часто бывают включены в файлы.exe или.dll, они могут быть также записаны на диске в независимых файлах с расширением.ico. Формат ICOпозволяет сохранять элементы 4‑битовой графики размером 32*32 пикселя. Иконки системы Windows могут принимать один прозрачный цвет (аналогично GIF), иногда называемый цветом экрана, а также цвет, обратный цвету экрана.

Типовые графические элементы Web ‑страниц

· Фон

Желая изменить применяемый по умолчанию фон HTML‑документа или его фрагмента (например, ячеек таблицы), автор страницы может произвольно задать цвет фона или указать, какой графический файл был использован для «обивки» окна браузера. Файл фоновой графики не должен быть большим. Если предлагается однотонный фон, то лучше предусмотреть задание цвета фона в кодах HTML. Лучше всего выглядят страницы с фоном в пастельных тонах, элементы которого сливаются в однородно окрашенную поверхность. При использовании тёмного фона шрифт должен быть ярким.

Пример:

<BODY bgColor=» yellow»> Фонжёлтогоцвета.

<BODY Background=» image1.gif»> Фондокументаизфайла.

· Иллюстрация, фотоснимок

Говоря о включении графики в Web‑страницу, чаще всего имеют в виду размещение в документе Иллюстрации или фотоснимка. Картинки для включения в HTML‑документ могут быть записаны в разных форматах, следовательно, могут иметь разные свойства. Ниже перечислены простые технологии, широко используемые для получения интересных эффектов на Web‑страницах и полного использования свойств картинок:

1) Размещение иллюстрации с прозрачным фоном. Изображение, «наложенное» на документ, выглядит значительно лучше. Иллюстрация отлично вписывается в документ независимо от изменения цвета фона Web‑страницы. Фон страницы (цвет, рисунок) служит и фоном для размещённой картинки.

2) Анимация на Web‑страницах служит чаще всего для украшения. Иногда анимация применяется для поэтапного представления информации – в отдельных кадрах последовательно отображается слова какой-нибудь надписи или открывается все больший фрагмент изображения. Этот эффект привлекает и удерживает внимание наблюдателя. Типовым форматом записи анимации для Web‑страниц является GIF.

3) Галерея миниатюр. Выводя на Web‑страницу галерею фотоснимков, нужно предусмотреть наличие дополнительного документа, содержащего эти самые фотоснимки в уменьшенном размере или же фрагменты этих фотоснимков. Каждая миниатюра является ссылкой на файл, в котором записано данное изображение, и щелчок клавиши мыши над миниатюрой начинает загрузку фотоснимка в окон Интернет-браузера. Галереи миниатюр создаются с целью быстрого ознакомления пользователя со всеми картинками и облегчения выбора фотоснимка, предлагаемого к загрузке в оригинальном размере.

4) Рассечение картинки. Часто получается так, что компрессия графических файлов приносит намного лучшие результаты (увеличение степени сжатия), если сжимать маленькие картинки, а не большие изображения. Большие изображения рекомендуется рассекать на меньшие фрагменты. Сохранение каждого фрагмента в своём файле иногда позволяет значительно уменьшить количество байтов, которые пользователь будет вынужден загружать с Web‑сервере для просмотра картинки в оригинальном размере. Восстановление изображения, происходит по принципам загрузки отдельных фрагментов в ячейки таблицы.