Веб-графика в картинках

В прошлое воскресенье мы пробежались по графическим форматам, нашедшим применение в Web. А теперь самое время разобраться, как использовать их возможности наиболее эффективно.

Вопрос выбора графического формата для того или иного изображения кажется многим тривиальным. И напрасно! Разумеется, типичные случаи наметанный глаз расставит по местам сразу же и безошибочно, но есть и ситуации пограничные, не вполне очевидные даже для профессионала.

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

Так, например, у Кирсанова можно прочесть: «Возвращаясь к теме малоразмерной графики, нужно отметить, что для изображений, размер которых меньше приблизительно ста пикселей по одному из измерений, единственным разумным выбором остается формат GIF. Как я только что писал, сложные текстуры на таких маленьких площадях чувствуют себя неуютно, — а если даже вам и нужен крохотный фрагмент фотографии, GIF справится с его воспроизведением ничуть не хуже, чем JPEG. Последний формат попросту не приспособлен для малоразмерной графики — достаточно сравнить объемы изображения размером в один пиксель: 43 байта в GIF и свыше полутора килобайт в JPEG.» (Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. — СПб: Символ-Плюс, 1999; с. 253.)

Весьма смелое утверждение, не правда ли? Практика, однако, заставляет с ним не согласиться. Причем по двум статьям.

Во-первых, что касается одного пикселя о полутора килобайтах. При помощи диалога File — Save As… в Photoshop 5 мне удалось после ряда экспериментов заполучить однопиксельную картинку в JPEG объемом ажно в пять килобайт, ну да и что с того? Такие цифры получаются в результате того, что Photoshop добавляет к файлу цветовой профиль, кучу никому не нужной служебной информации и черт знает что еще.

Сохранение однопиксельной картинки в JPEG в различных версиях ImageReady, а также посредством диалога File — Save for Web… в Photoshop 7 и 8 (естественно, без внедрения ICC-профиля, который все равно игнорируется браузерами) дает более-менее стабильный результат в районе 300 байт.

Во-вторых, насчет формата GIF как «единственного разумного выбора». В сегодняшнем практическом приложении к этой колонке на Web-Anatomy.Ru я привожу пример картинки, которую, казалось бы, сам Бог велел сохранять в GIF, но… которая выглядит лучше и весит в полтора раза меньше при сохранении в JPEG. Полюбуйтесь, картинка сия преподносит еще несколько неожиданностей.

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

Оптимизация графики не терпит типовых решений! Со многими изображениями стоит экспериментировать.

Но даже когда выбор в пользу того или иного формата сделан, на этом работа над изображением не заканчивается. Порой палитру GIF-изображения (это относится и к PNG с индексированной палитрой) можно уменьшить в 2—4 раза практически без видимых потерь качества. В особенности это касается одноцветного текста со сглаженными контурами (анти-алиасинг): палитру подобного изображения вполне можно ограничить восемью цветами.

Кстати говоря, хотя количество цветов в палитре GIF- или PNG-изображения может выбираться произвольным, лучше всего использовать палитры, состоящие из 2, 4, 8, 16, 32, 64, 128 или 256 цветов. В этом случае каждый пиксель изображения будет кодироваться минимально возможным количеством бит при максимально возможном количестве цветов в палитре. Классический пример задачи на оптимизацию… Поясню: цвет каждого пикселя в изображении, имеющем, например, 32-цветную палитру, кодируется пятью битами. При 33 цветах в палитре число бит на пиксель уже будет равным шести. 64 цвета — это максимум, который можно закодировать 6 битами. 65-й цвет потребует нового бита, и т. д.

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

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