2.2. Графика и мультимедиа на web-странице

Одна из наиболее привлекательных черт WWW – возможность включения ссылок на графические и мультимедийные файлы, которые делают web-страницу более привлекательной и интересной. Это могут быть значки, рисунки, фотографии, карты изображений, а также использование аудио-, видео- и анимационных данных.

2.2.1. Вставка графики в 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>

Атрибут	Назначение	Значение атрибута	Примеры записи
SRC	Адрес изображения	URL-адрес	<IMG SRC="picture.gif">
ALIGN	Позиционирование объектов на экране (необязательный атрибут)	выравнивание LEFT– слева RIGHT– справа MIDDLE– по линии строки TOP– по верху BOTTOM– по низу	<IMG SRC="picture.gif" ALIGN="RIGHT">
WIDTH	Ширина рисунка (необязательный атрибут)	в пикселях	<IMG SRC="picture.gif" WIDTH="50">
HEIGHT	Высота (необязательный атрибут)	в пикселях	<IMG SRC="picture.gif" WIDTH="50" HEIGHT="50">

Окончание табл. 2.2

Атрибут	Назначение	Значение атрибута	Примеры записи
ALT	Всплывающая подсказка (необязательный атрибут)	содержит некий альтернативный текст	<IMG SRC="picture.gif"ALT="фотографии цветов">
BORDER	Обрамление изображения	толщина в пикселях	<IMG SRC="picture.gif " BORDER="5">
VSPACE	Пустое пространство над изображением	в пикселях	<IMG SRC="picture.gif" VSPACE="20"
HSPACE	Пустое пространство слева и справа	Значение в пикселях	<IMG SRC="picture.gif" VSPACE="20" HSPACE="20"

<IMG SRC="image006.jpg" ALIGN= "RIGHT" WIDHT="325"

HEIGHT="215" BORDER="5" ALT="лилия">

Использование тега в данном примере позволяет поместить изображение из файла по правой стороне окна браузера, задает размер этого изображения и помещает его в рамку (см. рис. 2.3).