Уменьшение размера
Поддержка PNG в браузерах
В Netscape естественная поддержка PNG весьма ограничена: начиная с версии 4.04, для Internet Explorer она зависит от операционной системы. Для Macintosh IE полностью поддерживает PNG с версии 5.0 (в том числе включая альфа-канал). MSIE для Win32 и Unix обладает естественной поддержкой PNG (на деле же весьма посредственной) начиная с 4.0, но не поддерживает альфа-канал до версии 7.0 (это исправляется при помощи фильтра AlphaImageLoader).
На данный момент большое количество разнообразных браузеров также поддерживает PNG, однако лишь с 1-битной прозрачностью, что позволяет использовать PNG для замены неанимированных GIF.
PNG и проблема соответствия для фоновых CSS-изображений
К несчастью, поддержка возможностей PNG-гаммы и цветовой коррекции не является кроссбраузерной. Наиболее часто рекомендуемой мерой для исправления возможных ошибок будет исключение фрагментов, обеспечивающих гамму и цветовую коррекцию, для создания "неименованного" PNG (удаление gAMA-чанка). Это решает проблему цветового соответствия для современных браузеров, кроме Safari под Mac до OS 10.4 (тут может помочь удаление sRBG-чанка; подробнее об удалении чанков рассказывается немного ниже).
Для отдельных PNG-изображений это совсем не проблема, но для дизайна веб-страниц, который требует точного соответствия CSS-фона и PNG, к сожалению, это имеет значение (однако может быть устранено указанными выше путями).
Анимированные PNG: MNG против "PNG+&"
Формат составной сетевой графики (англ. Multiple Network Graphics, MNG) представляет собой несколько PNG-изображений, по аналогии с GIF89a. Однако MNG-формат является более сложным и не поддерживается текущими браузерами (для этого нужно использовать бесплатное расширение libmng).
Группа разработчиков Mozilla расширила текущий (для одного изображения) PNG-формат в браузере Firefox 3, добавив несколько дополнительных кадров для анимации. Существует также встречное предложение со стороны членов группы PNG, подразумевающее создание чего-то подобного; однако, не противоречащего спецификации PNG. Оба этих направления значительно проще, чем MNG, и оба открыты для голосования в группе PNG.
Сейчас же для анимации изображений лучше всего применять GIF89a или Flash. Однако последние достижения в векторной графике, SVG и развитие анимационных JavaScript-библиотек составляют реальную конкуренцию указанным форматам. Вполне возможно, что через несколько лет вся несложная анимация в браузерах будет осуществляться при использовании именно такого подхода.
Двигаемся к маленьким PNG
PNG работает лучше с большими однотонными областями. Чтобы увеличить степень сжатия, стоит уменьшить количество "шума" в ваших картинках для увеличения размеров однотонных областей. Уменьшайте области размывания, хотя для изображений с градиентами размывание позволяет использовать меньшую глубину цвета. Избегайте сглаживания текста для уменьшения числа цветов, которые для него необходимы, в финальном изображении.
По возможности уменьшайте число цветов в вашем исходном изображении, если в процессе разработки этот фактор можно контролировать. Стоит также избегать использования многослойных PNG-изображений для уменьшения размера файла, так как семипроходная многослойная схема может добавить от 20% до 35% к размеру PNG-файла. Наконец, можно применять специальное программное обеспечение для оптимизации PNG-изображений, которое специально разрабатывается с этой целью, например pngout или pngcrush.
Полезные советы
Ниже приведено несколько простых советов, как текущие изображения можно дополнительно уменьшить в размере. Можно написать простой скрипт, который перебирает директории с изображениями перед публикацией сайта и делает следующие действия (далее приведены примеры запуска утилит из командной строки для ОС Linux):
-
Преобразовывает GIF в PNG (и проверяет, есть ли при этом выигрыш):
convert image.gif image.png
или так:
gif2png -nstO image.gif image.png
- Уменьшает PNG-файлы в размере:
pngcrush –qz3 –brute image.png result.png
если при этом нужно удалить и gAMA-чанк, то
pngcrush –qz3 –rem gAMA –brute image.png result.png
если при этом хотим удалить другие чанки, отвечающие за цветовую коррекцию, то
pngcrush –qz3 –rem gAMA -rem cHRM -rem iCCP -rem sRGB \ –brute image.png result.png
- Уменьшает JPEG-файлы в размере (без потери качества):
jpegtran -copy none -optimize -perfect image.jpg > result.jpg
Под Windows для уменьшения PNG-изображений можно использовать TweakPNG (http://entropymine.com/jason/tweakpng/). Аналогом jpegtran является набор портированных утилит jpeg, которые можно загрузить по адресу http://sourceforge.net/projects/gnuwin32/.
Для отдельно взятой страницы общий размер изображений может быть уменьшен на 20–30% только благодаря следованию этим простым советам.
Разгоняем favicon.ico — это как?
В очередной презентации Yahoo! на тему клиентской производительности (часть 2) был поднят вопрос о favicon.ico. Они приводили несколько интересных фактов о данном явлении и давали пару советов. Процитируем их рекомендации.
- www.mysite.ru/favicon.ico.
- Необходимое зло:
- браузер в любом случае ее запросит,
- лучше не отвечать 404-ошибкой,
- будут отправлены cookie,
- не может быть в CDN,
- мешается в последовательности загрузки ресурсов.
- Уменьшайте ее (<=1 Кб).
- Не стоит использовать анимированные иконки.
- Выставляйте заголовок Expires.
- Запросы к favicon.ico составляют 5-10% от общего числа запросов к сайту.
favicon.ico, во-первых, запрашивается едва ли не один-единственный раз браузером при посещении сайта, во-вторых, загружается, игнорируя обычный порядок загрузки. Из чего можно заключить, что она не является обычной картинкой при загрузке сайта, поэтому в дополнение к уже имеющейся информации был проведен ряд дополнительных исследований, чтобы объединить все, что известно прогрессивному человечеству на данную тему. Однако в ходе изучения материала оказалось, что проблема совсем не так прозрачна, как представлялось изначально. Формат .ico предстал в новом свете, весьма выгодном для использования в Интернете.
Краткое описание формата
favicon.ico имеет формат . ico (на самом деле, такой формат есть, а соответствующий MIME-тип прижился не везде; при этом он объединяет несколько довольно специфических типов; подробнее об этом можно прочитать в статье на Wikipedia, (http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29). С одной стороны, он позволяет представлять информацию без потерь (в отличие от JPEG). С другой стороны, он фактически является аналогом BMP, но на этом их сходство заканчивается.
Я не буду приводить точную его спецификацию (она не так сложна, и ее можно обнаружить, например, по следующему адресу: http://www.daubnet.com/formats/ICO.html), однако в глаза сразу бросилось две вещи: возможность использования индексированных цветов (ага, это уже почти GIF) и возможность использования линейного сжатия (а это уже почти PNG). Интересно? Тогда мы продолжаем.
Собственно, эта информация следует из вот этих частей формата:
BitCount 2 bytes bits per pixel = 1, 4, 8 Compression 4 bytes Type of Compression = 0