Онлайн учебник по WEB-графике

Графика на вашей интернет-странице

Оптимизация графики для Веб-страниц

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

Я не стал останавливаться на вопросах, связанных с поведением графики в старинных восьмибитных видеорежимах. Такие понятия, как "безопасная" палитра уже утратили прежнюю актуальность. В то же время многие веб-мастера часто делают ошибки, которых можно избежать, повнимательнее присмотревшись к некоторым особенностям графических форматов и графических редакторов.

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

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

Особенности сжатия в JPEG

При разработке метода сжатия JPEG были учтены некоторые примечательные особенности органов цветового восприятия человека. Дело в том, что человеческое зрение куда более чувствительно к изменению освещенности, а не собственно цвета. Используемая в компьютерной графике цветовая модель RGB (красный, зеленый, синий) "не экономична" из-за одинаковой важности всех трех составляющих. Выбор же иной системы цветовых координат позволяет увеличить сжатие путем отброса доброй половины информации об оттенке и насыщенности цвета. При этом наиболее важный для глаза компонент яркости остается нетронутым. После такой операции объем информации уменьшается на треть. Кстати, в этом формат JPEG очень похож на схемы цветопередачи в цветном телевидении.

Кроме того в JPEG реализован алгоритм сжатия "с потерями" - дискретное косинусоидальное преобразование (DCT), при котором информация о цвете каждого пикселя заменяется информацией о характере изменения цветов в пределах заданной области. Изображение квантуется - преобразуется в мозаику из квадратов (обычно 8 х 8 пикселей). Внутри каждого такого квадрата распределение цветов описывается специальной математической функцией, коэффициенты которой и хранятся в JPEG-файле. Качество суррогатного изображения, полученного путем обратного преобразования, и соответственно размер файла зависят от сложности функции и погрешности округления.

Только после всех этих преобразований наступает очередь обычного сжатия (уже без потерь). Для этого, как правило, применяется не запатентованный алгоритм Huffman compression. Предварительно рассортированная по полочкам информация сжимается максимально эффективно.

JPEG предназначен, прежде всего, для цветных фотографий с мягкими цветовыми переходами, ведь с увеличением показателя сжатия становится заметным взаимное проникновение цветов на резких цветовых контактах и "дрожание" тонких линий. Варьируя степень сжатия можно добиться очень высоких показателей оптимизации цветных фотографий (например, 1: 10) без заметной глазу потери качества. Формат 24-разрядный (16,7 млн. цветов) - это возможно главное, хотя и относительное, преимущество перед GIF.
Для малоразмерных изображений (десятки пикселей) JPEG не используют, т. к. в виду описанных выше особенностей он нечетко передает мелкие детали. Для сравнения приведу минимальные размеры одно-пиксельных файлов: для JPEG - 542 байта; для GIF - 35 байт.

Особенности сжатия в GIF

Этот формат был создан фирмой CompuServe в далеком 1987 году. На сегодня GIF остается одним из самых распространенных графических форматов, и его поддерживают все существующие графические браузеры. Фактически, понятие Web-графики большей частью сводится к технике создания GIF-изображений.

Главные, хотя и совершенно не связанные между собой, особенности формата - это привязка изображения к определенной палитре и алгоритм сжатия без потерь - LZW. Поэтому размер (а значит скорость загрузки) GIF-файла находится в строгой зависимости от двух вещей - размера палитры (количества задействованных цветов) и характера самого изображения (его "фрагментации")

Палитра (таблица цветов) может содержать 2, 4, 16, 32, 64, 128 или 256 ячеек. Таким образом, картинка в формате GIF не может иметь более 256 цветов (8 бит на пиксель). Впрочем, для большинства задач веб-дизайна 256 цветов в одном файле - это даже много. Палитра может содержать "системные" цвета, либо быть произвольно индексированной, т. е. адаптированной для конкретного изображения. Если оригинал имеет более 256 цветов, то при экспорте близкие оттенки принимают некоторое усредненное значение. Есть даже такое псевдо-эмпирическое правило: чем большую площадь занимает цвет на картинке, тем больше у него шансов остаться "самим собой". Частично решить проблему ограниченности палитры иногда помогает диффузия цветов - смешивание пикселей для получения переходного оттенка. Такая опция есть в большинстве графических редакторов. Но тут мы сталкиваемся с другой проблемой - диффузия вносит в файл изображения дополнительную порцию беспорядка, что влияет на его сжимаемость. Поэтому диффузию желательно компенсировать сокращением палитры (например, с 256 до 128 или 64 цветов)

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

210 байт	519 байт	1002 байта

Секрет в том, что в GIF-файлах информация хранится построчно. Как видите, описать по строкам первую картинку довольно просто, чего не скажешь о последней.

Как известно, существует две версии формата: GIF87a и GIF89a. Такие расширения, как прозрачность и анимация поддерживаются только в GIF89a, поэтому большинство программ создают файлы именно в этом варианте.