Вставка графики в HTML-документ

Значение графических изображений в аспекте создания электронных документов невозможно переоценить, документы становятся более выразительными и яркими и будут восприниматься легче и естественнее. Однако всегда и во всем следует помнить о чувстве меры. Перенасыщение документа иллюстративным материалом будет неоправданно отвлекать внимание пользователей от истинного содержания страницы, а еще приводит к тому, что страница будет медленнее загружаться из-за наличия большого количества рисунков.

Графические компоненты web-страницы по назначению можно условно разделить на три обширные категории:

– иллюстративная графика, включая дополняющий текст фотографии, пояснительные рисунки, чертежи, схемы;

– функциональная графика, представляющая собой элементы управления (кнопки навигации, счетчики и элементы интерактивных форм);

– декоративная графика – элементы дизайна страницы, включенные в нее для красоты и не несущие информационной нагрузки (фоновые рисунки, разделители, выполненные в виде графических файлов, заголовки и многое другое).

Графические форматы. В связи с использованием Интернета для загрузки графического изображения требуется определенное количество времени. И чем меньше это время, тем удобнее пользователю. Поэтому для графических изображений сейчас используют три самых популярных формата GIF, JPEG и PNG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря которым удается значительно уменьшить размер целевого файла.

GIF-формат. В 1978 году израильские исследователи Якоб Зив и Абрахам Лемпел разработали новый для того времени алгоритм сжатия информации без потери данных (LZ78 – название проекта). Через несколько лет американский программист Терри Уэлч усовершенствовал его (LZW) и также представил свою разработку для использования всем желающим.

В 1987 году Боб Берри на основе алгоритма LZW создал принципиально новый графический формат GIF. Суть алгоритма сжатия: уменьшение размера графического файла достигается путем смешения сходных оттенков в один, информация об изображении в файле GIF записывается построчно, т. е. представляет собой массив описаний строк высотой в один пиксел. Свойства: смешение сходных оттенков в один, оперирование фиксированной палитрой 256 цветов.

GIF формат используется в HTML-документе только для отображения бизнес-графики: диаграмм, логотипов, кнопок, других элементов оформления страницы – и рисунков с палитрой цветов 256.

Еще одно свойство GIF – чересстрочность, т. е. картинка загружается не целиком, а частями (считывается 1-я, 5-я, 10-я строки, затем 2-я, 6-я, 11-я и т. д.), т. е. как бы проявляется.

В 1989 году компания CompuServe выпустила новую версию GIF89а, которая использует для создания изображения прозрачного фона методом сохранения вместе с файлом так называемого «альфа-канала» – представляющего собой маску прозрачности рисунка. Цвета, насыщенные как прозрачные, в браузере становятся невидимыми.

Другая особенность GIF89а в том, что этот формат позволяет сохранять в формуле с одним физическим заголовком несколько разных изображений, демонстрируя их на экран последовательно один за другим.

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

Механизм сжатия состоит из трех ступеней.

1. Изображение преобразуется в цветовой образ LAB, раскладывающий картинку на три независимых канала: L – сохранение интенсивности цветов, А и В – для запоминания цветовой информации.

2. Компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки 8× 8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация – менее заметные оттенки.

3. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хоффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой.

Декомпрессия формата JPEG осуществляется в обратном порядке.

Максимальное количество цветов, которое может содержать изображение в формате JPEG, – 16 миллионов.

PNG-формат. Этот формат был разработан в 1995 году, чтобы прийти на смену формата GIF после действий компании Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были разработаны некоторые технические характеристики, в частности улучшение качества и увеличение количества поддерживаемых цветов.

Включение графики в web-страницу. Интеграция графики в HTML-документ осуществляется с использованием одиночного тега < IMG >.

< IMG SRC=" URL" >

Атрибут SRC (источник) задает URL-адрес изображения (рис. 2.3).

Рис. 2.3. Пример отображения примера с тегом < IMG >

Данный атрибут относится к числу обязательных в теге < IMG > (табл. 2.2).

Таблица 2.2

Атрибуты тега < IMG >