Размер имеет значение. Графический дизайн

Станислав Жарков, http://zharkov.list.ru

Рекламный слоган фильма "Godzilla" актуален и при подготовке HTML-страниц и графики. Об этом, конечно, твердят все справочники и руководства, но, судя по огромному количеству WWW-страниц, загрузка которых длится чуть меньше полугода, эту тему стоит рассмотреть еще раз.

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

Итак, приступим. Сначала, естественно, графика. Формат JPEG пока трогать не будем, остановимся на GIF.

Сначала поговорим о "грубой силе", то есть уменьшении размеров файла изображения за счет уменьшения количества цветов в его палитре.

Вы знаете, что, когда вы создаете картинку в графическом редакторе, например, Photoshop, она имеет цветовую палитру RGB, то есть 24 bit (более 2 млн. цветов). Для того, чтобы сохранить ее в формате GIF, вы, естественно, должны перевести ее в режим индексированной палитры (256 и менее цветов), так как формат GIF поддерживает максимум 256 цветов.

Ограничить палитру изображения 256 (и менее) цветами в Photoshop версий 3.0 и 4.0 можно было только одним способом: через меню Image/Mode/Indexed Color. Это было очень неудобно, так как окно "Indexed Color" не предоставляло (впрочем, не предоставляет и до сих пор) всех необходимых функций для контроля палитры изображения. В версии 5.0 (ура!) появилось окно "Save for Web" (и одноименный пункт в меню File), явно перекочевавшие из Adobe ImageReady. Лично мне возможностей, пердоставляемых Photoshop для оптимизации изображений, теперь вполне достаточно и я не чувствую потребности в дополнительных программах-оптимизаторах.

Подробно описывать работу с функцией "Save for Web" я не буду - вы сполне сможете разобраться сами (если еще не разобрались). Скажу только, что с помощью нее можно удалить любые цвета из палитры, заменить их на любой другой или ближайший к нему из 216-цветной "палитры Netscape", зафиксировать их (чтобы при переходе, скажем, от 256 цветов к 32-м нужные цвета не были удалены из палитры). Единственное, чего, на мой взгляд, не хватает - функции Undo (по традиции интерфейса Windows-программ, в диалоговых окнах Undo не предусматривается). Так что для особо сложных случаев приходится, хотя и редко, пользоваться Adobe ImageReady - там оптимизация происходит прямо в главном окне программы, и функция Undo, естественно, доступна.

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

Как вы, вероятно, знаете, сжатие изображения при его записи в формате GIF происходит по горизонтали. То есть чем больше в картинке прямых, непрерывных горизонтальных линий, чем длинее эти линии, тем меньше объем файла.

Предположим, вы отсканировали и сохранили в формате GIF (128 цветов) вот такой логотип:

Если в Photoshop несколько раз нажать <Ctrl>+<+>, то вы увидите примерно следующее:

Как видите, в буквы "Viewsonic" (особенно по краям) засорены всякими сомнительными темно-красными и белыми точками, которые нарушают целостность красных линий букв, уменьшая эффективность алгоритма сжатия и увеличивая итоговый объем GIF-файла. Поэтому нужно в режиме увеличения (Zoom In) картинки аккуратненько закрасить эти точки соответствующими цветами: в зависимости от конкретной картики экономия объема файла составит 10-30%. Долго? Занудно? Так никто не говорил, что будет легко!

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