Тройственный союз

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

Ибо терзает меня ощущение недосказанности: и вправду, какой же разговор об ускорении загрузки страниц без реверанса в сторону оптимизации веб-графики?..

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

Начнем, по традиции, с графических форматов…

Общеизвестно, что графика в Web держится на трех китах — форматах GIF (Graphics Interchange Format), JPEG (а точнее, JFIF — JPEG File Interchange Format; JPEG же — это Joint Photographic Expert Group, объединенная группа экспертов в области фотографии, предложившая одноименный алгоритм сжатия) и PNG (Portable Network Graphics).

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

Миру известны две разновидности формата GIF — GIF87a и GIF89a (цифры означают год создания). Обе они прекрасно поддерживаются всеми графическими браузерами. GIF89a получил в Сети наибольшее распространение за счет поддержки прозрачных областей и анимации. Помимо прочего, в GIF изначально предусмотрена возможность чересстрочной развертки.

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

Существует несколько вариантов формата JPEG. Следует сразу заметить, что JPEG2000 — это не разновидность JPEG, а совсем другой формат, который не нашел (пока?) применения в Web, и поэтому говорить мы о нем не будем.

Я веду речь о другом — Photoshop, например, предлагает нам сохранять JPEG-файлы в трех форматах: Baseline (основной), Baseline Optimized (оптимизированный) и Progressive (с прогрессивной разверткой).

Первый из перечисленных форматов — самый простой. По сравнению с остальными он обеспечивает наименее эффективное сжатие. К тому же, изображение в формате JPEG Baseline появляется на экране только после полной загрузки файла, что делает данный формат малоприменимым в Web.

Baseline Optimized при прочих равных условиях обеспечивает более эффективное сжатие, а изображение, сохраненное в этом формате, проявляется на экране постепенно, по частям, по мере загрузки файла. Наглядность процесса загрузки — это несомненный плюс, повышающий интерактивность интерфейса веб-страницы.

Наконец, формат Progressive по сути своей аналогичен формату GIF с чересстрочной разверткой. Иными словами, изображение, сохраненное в JPEG Progressive, сразу же проявляется на экране целиком, а по мере загрузки его детали постепенно уточняются.

К сожалению, основное отличительное свойство JPEG Progressive не реализуется в Internet Explorer, включая даже шестую версию. IE отображает такие файлы подобно формату Baseline, что пока делает «прогрессивный» JPEG абсолютно бесполезным.

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

Кстати, что касается возможности использовать чересстрочную развертку в GIF, злоупотреблять ею вряд ли стоит, поскольку в больших количествах это раздражает. Чересстрочная развертка может оказаться полезной применительно к GIF-изображениям крупного формата — к примеру, каким-нибудь картам или схемам в пол-экрана.

Плавно переходим к PNG. Он позиционируется как полноценная замена обоим вышеозначенным форматам сразу. PNG использует сжатие без потерь качества и может иметь произвольную глубину цвета вплоть до 48 бит на пиксель. Правда, при подготовке графики для Web в основном применяются варианты формата PNG либо с индексированной палитрой, когда на каждый пиксель приходится от 1 до 8 бит информации, как в случае с GIF, либо с 24-битной глубиной цвета. Одним из ключевых достоинств PNG является поддержка альфа-каналов — это дает возможность определять в изображениях области дробной прозрачности. В PNG, правда, в отличие от GIF89a, отсутствует возможность создания анимированных изображений. На то, однако, нынче есть Flash.

PNG сносно поддерживается всеми распространенными ныне браузерами, но только до тех пор, пока не заходит речь о той самой прозрачности. Прогрессу мешает, как обычно, Internet Explorer, который по неведомым причинам подрисовывает под PNG-изображениями какой-то несусветный фон.

Правда, в поздних версиях MSIE (начиная с 5.5) для нормального отображения картинок с альфа-каналом предусмотрен специальный фильтр AlphaImageLoader. Проблема, однако, в том, что при его использовании в атрибуте src тега <img> не должно быть ничего. Что, разумеется, заставляет разработчиков выискивать разные обходные пути. Надежнее всего — распознавать версию пользовательского агента на стороне сервера и отправлять «Эксплореру» персонально адаптированный код, отличный от того, который согласны кушать не столь капризные браузеры. Хотя возможны и другие, более витиеватые способы обеспечения кроссбраузерной совместимости.

Что касается вопросов размера файла, то PNG действительно позволяет добиться экономии (до 20%) по сравнению с GIF в классических случаях, то есть применительно к четким и небольшим изображениям с ограниченной палитрой. Что же касается фотографических изображений, то PNG безусловно «тяжеловеснее» JPEG даже с наилучшим качеством, причем зачастую разница весьма и весьма ощутима. Таким образом, явных причин целесообразности жертвы форматами GIF и JPEG в пользу PNG пока что на горизонте не предвидится. Хотя W3C признает только последний, но в основном — из-за правовых причин. (Алгоритм LZW, используемый в GIF, запатентован Unisys и IBM, да и на JPEG не так давно нашелся претендент — компания Forgent Networks, в то время как PNG — изначально открытая технология, разработанная специально для Web.)

Вероятно, наша сегодняшняя колонка обзорного толка покажется кому-то скучноватой — ведь Америки мы не открыли. Зато вот следующее воскресенье я уже с чистой совестью смогу полностью посвятить менее очевидным истинам, связанным с подготовкой веб-графики. Постараюсь обеспечить наглядные примеры.