Оптимизация графики:
творческий подход

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

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

Речь здесь идет о только двух классических сетевых растровых форматах - 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, поэтому большинство программ создают файлы именно в этом варианте.

прозрачность

Прозрачность реализована крайне примитивно, и применить ее на практике весьма сложно. Альфа-канал однобитный, поэтому можно задавать только области абсолютной прозрачности или абсолютной непрозрачности. Например, графический заголовок, изначально созданный на белом фоне с использованием анти-алиасинга (сглаживания) при указании белого цвета прозрачным будет отвратительно выглядеть на любом фоне, кроме белого, т. к. станут видны светлые зазубрины - побочный продукт сглаживания. Как видите, при создании изображения с прозрачными областями, необходимо заранее учитывать цвет фона, на котором оно будет находиться. Если же цвет фона не известен, то лучше обойтись без анти-алиасинга внешних контуров изображения.

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

Особая разновидность прозрачных GIF-файлов - это файлы-распорки размером 1x1 пиксель. В эпоху браузеров третьих версий они были единственным средством абсолютного позиционирования на веб-страницах. В самом деле, GIF-невидимка весит всего 43 байта и при этом может обладать всеми HTML-атрибутами "настоящей" картинки: width, height, vspace, hspace.

анимация

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

техника оптимизации

Подготовка картинки к размещению на веб-странице обычно состоит из нескольких этапов.

Шаг первый - это создание оригинала.

  1. Картинка может быть отсканированной фотографией или рисунком.
    Сегодня даже самые дешевые планшетные сканеры позволяют сканировать изображения с разрешением до 600dpi и 24-битной глубиной цвета. Для подготовки веб-графики вполне достаточно отсканировать картинку с разрешением 300dpi, после чего средствами графического редактора уменьшить разрешение до стандартной "экранной" величины - 72 пикселя на дюйм. В программе Adobe Photoshop это делается через меню Image > Image Size. Обычно такой метод дает лучшие результаты, чем простое сканирование с низким разрешением. Если после уменьшения экранных размеров картинки с использованием бикубического масштабирования (Resample Image: Bicubic) она заметно потеряет резкость, можно ее повысить, используя соответствующий фильтр: Filter > Sharpen > Sharpen. Контурные рисунки желательно сканировать в однобитном монохромном режиме (LineArt), но с высоким разрешением. Это позволяет избавиться от ненужной бумажной фактуры фона. Да и в случае с цветными рисунками зачастую имеет смысл уменьшить количество переходных оттенков и соответственно расширить области сплошных цветов - "постезизовать" (Image > Adjust > Posterize). При необходимости с помощью утилиты-трассировщика такая картинка может быть переведена в векторный формат для дальнейших преобразований
  2. Рисунок может быть создан в векторном графическом редакторе (например, в Corel Draw) и экспортирован в промежуточный растровый формат (TIFF и т. п.) или непосредственно в GIF.
  3. Картинку можно нарисовать в растровом редакторе, таком как FractalDesign Painter или Adobe Photoshop. Это особенно касается всевозможных кнопочек, маркеров и т. п. элементов интерфейса.

Второй шаг - выбор формата. При выборе (а выбирать пока приходится лишь между GIF и JPEG) желательно руководствоваться следующими правилами:
GIF применяется:

JPEG применяется:

Как видите, область применения формата GIF в веб-графике гораздо шире. Безусловно, GIF c использованием 8-битной адаптированной палитры и диффузии вполне может справится и с качественной передачей практически любого фотографического изображения, но тут он в 99% случаев проигрывает формату JPEG в экономичности. В спорных случаях стоит попробовать сперва сохранить картинку в JPEG-файле с приемлемым уровнем качества, а затем отталкиваться от полученного размера файла при экспорте в GIF.

Третий шаг - экспорт оригинала в нужный формат. Существует немало специальных программ и plug-in-модулей для визуальной оптимизации, типа Ulead SmartSaver, но вполне можно обойтись и стандартными средствами Photoshop. Итак мы имеем готовое изображение в растровом формате в цветовом режиме RGB. Если преимущество JPEG, как конечного формата очевидно, то все довольно просто: заходим в меню File > Save a Copy, выбираем в списке формат JPEG. Опция "Exclude Non-Image Data" должна быть отмечена флажком - тогда в файле не будет сохранена миниатюрная копия картинки, что позволит выбросить несколько лишних килобайт. Далее предстоит установить уровень качества (0 - 10) и опции формата. Этот шаг, возможно, придется повторить несколько раз для достижения наилучшего результата. Опция "Baseline Optimized" обычно позволяет немного сократить размер файла. А с помощью опции "Progressive" можно создать JPEG-файл, который будет постепенно прорисовываться (детализироваться) в окне браузера по мере скачивания из Сети. Правда некоторые старые браузеры прогрессивный JPEG не поддерживают. "Прогрессивная" опция может влиять на размер файла, но крайне незначительно, причем как в меньшую, так и в большую сторону. Зато параметр качества (Quality) влияет на размер файла очень сильно, и эта зависимость далеко не прямая. Взгляните на диаграмму, которую я построил из спортивного интереса для вот этой фотографии. По вертикали отложены размеры JPEG-файлов в байтах, по горизонтали - коэффициенты качества.

Показанная на иллюстрации фотография котенка соответствует коэффициенту "7" ("High Quality").


Экспорт оригинального изображения в формат GIF - не менее творческая задача. Для начала создадим копию изображения (Image > Duplicate) и перейдем из режима RGB в Indexed Color (Image > Mode > Indexed Color). На появившееся предложение объединить все слои отвечаем согласием (мы ведь создали копию). Если в исходной картинке было задействовано более 256 цветов, то будет предложена адаптированная 8-битная палитра. Но в большинстве случаев есть смысл сократить количество цветов и получить тем самым выигрыш в размере файла. Все зависит от конкретного рисунка. Если это цветная фотография маленьких размеров, то можно установить 7-ми или 6-битную палитру и воспользоваться диффузией, установив опцию "Dither: Diffusion". А если, например, наша картинка - это текстовый логотип с анти-алиасингом, то от диффузии непременно нужно отказаться, т. к. могут появиться нелепые зубцы вокруг символов (компьютер наивно полагает, что таким образом он сгладит цветовую границу, запихнув диффузию туда, где ей в действительности нет места). К тому же, как уже было сказано выше, диффузия неуместна в изображениях с прозрачностью.

Итак, когда палитра подобрана, можно отправлять картинку в формат GIF (File > Export > GIF89a Export) В появившемся окошке "GIF89a Export Options" мы не только увидим, как картинка будет выглядеть после экспорта, но и сможем указать прозрачные области (прозрачными можно сделать сразу несколько цветов). Включенная опция "Interlace" означает, GIF-файл будет сохранен в чересстрочном режиме (на экран по мере поступления информации будет выводится сначала, каждая восьмая, затем каждая четвертая строка и так до полной загрузки). Чересстрочные файлы весят немного больше, чем обычные, поэтому при экспорте, например, картинок-фонов от опции "Interlace" лучше отказаться за ненадобностью. Можно, конечно экспортировать картинку в GIF непосредственно из RGB, но тогда мы не сможем так просто управлять прозрачностью, диффузия может появиться без спросу, а еще в палитру зачем-то будут добавлены черный и белый цвета, совершенно независимо от того, нужны они там или нет.

При сохранении в GIF'e больших изображений, в целях оптимизации их можно разрезать на любое число более мелких фрагментов. Это даст возможность сохранить каждый фрагмент с собственной наиболее оптимальной палитрой: например, некоторым крупным кускам может хватить и двух цветов, а для какого-нибудь особо важного фрагмента можно "раскошелиться" и на все 256. Собрать все воедино на веб-странице не составит особого труда.