Станислав Жарков
Рекламный слоган фильма "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-файлы на несколько
процентов больше по объему, чем нечересстрочные, так как информация о
"чересстрочности" требует дополнительного кодирования.
Графика и дизайн: общие темы
|