Одном из свойств стандарта GIF является его особенность, названная разработчиками " interlace ", или, "черезстрочность". Она позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем – вторая, шестая и одиннадцатая и т.д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно "проявляется" на странице.
В 1989 году компания CompuServe выпустила новую версию этого графического формата, получившую название GIF 89 a . Данная модификация включает в себя еще две особенности. Первая называется " transparancy " и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно "подогнать" части изображений друг к другу не представляется возможным. Убрать ненужный фон из файла GIF можно встроенной процедурой графического редактора Adobe Photoshop .
Другая особенность стандарта GIF89a заключается в том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена GIF-анимация.
JPEG ( Joint Photographic Experts Group , объединенная группа экспертов в области фотографии) – графический стандарт, созданный на основе одноименного алгоритма сжатия, изображений с потерей качества, кодирующего не идентичные элементы, а межпиксельные интервалы.
Механизм сжатия изображения в файл формата JPEG . Первой ступенью компрессии является преобразование изображения в цветовой образ LAB , раскладывающий картинку на три независимых канала, один из которых ( Lightness ) выделен для сохранения значений интенсивности цветов, а два других (А и В) - для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной но принципу непрерывного спектра. Вторя ступень – собственно компрессия; из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8х8 точек, и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация – менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.
JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов.
Существует несколько разновидностей стандарта JPEG. Формат JPEG Baseline Optimized основан на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized . Отличительная особенность Progressive JPEG – возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF .
PNG (Portable Network Graphics, портативная сетевая графика), пользователи придумали этой аббревиатуре иную расшифровку: Picture is Not GIF. PNG поддерживает interlacing (черезстрочность) не только по горизонтали, но и по вертикали. Палитра PNG позволяет создавать изображения с глубиной цвета до 48 бит, а также поддерживает альфа-канал, но состоит он не из одного уровня, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности от 0 до 99%. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был. Изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной "гамма" в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этот формат поддерживают броузеры Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше.
Оптимизация графических изображений. При сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество "лишних" данных, таких, например, как невидимые текстовые комментарии, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т.д. Все эти дополнения увеличивают физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский броузер, используют специальные методы оптимизации изображений с использованием специальных программ – оптимизаторов графики.
Включение графики в html-документ осуществляется с использованием команды < IMG >, синтаксис которой в общем виде записывается следующим образом:
< IMG src =” URL ”
а lign =”значение”
border =”значение”
width =”значение”
height =”значение”
alt =”текст”
hspace =”значение”
vspace =”значение”
ismap >
В качестве параметра атрибута src указывается путь к изображению в виде либо полного URL (например, http: // www. mys1te. ru/ i mages/p i cture. jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например,. . / Images / picture . jpg ).
С помощью атрибута align картинка позиционируется в документе HTML . Этот атрибут может принимать значения:
right – изображение выравнивается по правому краю,
left – изображение выравнивается по левому краю,
center – изображение выравнивается по центру,
texttop или top – изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка,
absbottom или bottom – изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки,
absmiddle или middle – центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки,
baseline – изображение выравнивается по условной "базовой линии". Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы.
Атрибут border управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение border равным нулю.
В качестве параметров атрибутов width и height указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.
Атрибут alt содержит альтернативный текст, который отображается вместо картинки в браузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в виде всплывающей "подсказки", если пользователь задержит на изображении курсор мыши.
Атрибуты hspace и vspace задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. hspace определяет величину незаполненного пространства справа и слева от картинки, vspace соответственно сверху и снизу.
Атрибут ismap говорит о том, что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения.
Пример применения тега < IMG >:
< IMG src =”/ images / sunset . ipg ”
align =” CENTER ”
width =”325”
height =”215”
а lt =”Красивый закат на берегу Карибского моря”>
Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и < IMG >, записав ее следующим образом: