Автор статьи: Жарков Станислав
Рекламный слоган фильма «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 несколько раз нажать
Как видите, в буквы «Viewsonic» (особенно по краям) засорены всякими сомнительными темно-красными и белыми точками, которые нарушают целостность красных линий букв, уменьшая эффективность алгоритма сжатия и увеличивая итоговый объем GIF-файла. Поэтому нужно в режиме увеличения (Zoom In) картинки аккуратненько закрасить эти точки соответствующими цветами: в зависимости от конкретной картики экономия объема файла составит 10-30%. Долго? Занудно? Так никто не говорил, что будет легко!
И, напоследок, еще один момент. Я рекомендую вам воздерживаться от сохранения GIF-файла в виде чересстрочных (interlaced) изображений. Во-первых, «проявляющееся» изображение во время загрузки не так уж хорошо выглядит с эстетической точки зрения; во-вторых, interlaced-файлы на несколько процентов больше по объему, чем нечересстрочные, так как информация о «чересстрочности» требует дополнительного кодирования.
