Введение

Переносимый сетевой графический формат (Portable Network Graphics, PNG) разрабатывается как более эффективная, гибкая и свободная от патентов замена GIF-формату. PNG был задуман для хранения отдельных растровых изображений для дальнейшего распространения по компьютерным сетям.
PNG был создан в 1995 в ответ на давление со стороны Unisys и их патента на алгоритм LZW-сжатия, используемый в GIF. Хотя срок действия патента Unisys уже закончился, причины на переход от GIF к PNG остались, практически, прежними. Заменив ваши GIF-изображения теми же самыми, но в формате PNG, вы можете ускорить загрузку ваших страниц и сэкономить трафик ваших пользователей.

PNG против GIF: алгоритмы сжатия

PNG использует алгоритм deflate-сжатия обычно с 32Кб скользящим (sliding) окном. Deflate является улучшенной версией алгоритма сжатия Lempel-Ziv (LZ77), который используется в ZIP- и GZIP-файлах. Созданный Phil Katz для второй версии PKZip, deflate совмещает LZ77 с кодированием Huffman и является от 10% до 30% более эффективным, чем LZW при сжатии без потери информации. Так же, как и GZIP, некоторые инструменты по PNG-сжатию предполагают опциональный параметр «степень сжатия», которая варьируется от 1 до 9.
По умолчанию выставляется 6. 9 является практически всегда лучшим выбором для максимального сжатия.

Не удивительно, что изображения, сохраненные как PNG, обычно от 10% до 30% меньше, чем GIF, хотя в некоторых редких случаях они могут быть больше по размеру. В нашем тестировании мы обнаружили, что часть картинок могут быть сжаты от 40% до 50% или даже больше (до 85% для одного примера), в зависимости от изображения. По большей части изображения с большими однотонными областями сжимаются лучше, чем градиентные с большим количеством переходов между цветами.

Возможности PNG

В PNG присутствует набор возможностей, которые делают его привлекательным для медицинской и графической отраслей.
Fireworks использует PNG-формат для хранения внутренних файлов, а поддержка в PNG 16-битной серой шкалы прекрасно подходит для создания точных радиологических изображений. PNG предварительно фильтрует данные по конкретному изображению при помощи предсказательных функций.
Одной из них является «Вверх» (Up), которая ищет похожие наборы данных в вертикальных шаблонах для полноцветных PNG.
PNG с индексированными цветами (8 битов или меньше) обычно не выигрывает от использования фильтрации, поэтому стоит использовать «ничего» (none), если есть возможность для выбора. Для полноцветовых или серых изображений стоит использовать «Адаптивный» (Adaptive).

Для Веба можно использовать PNG8 (8 бит), с помощью которого дизайнеры могут заменить существующие GIF-изображения.
У PNG также может быть альфа-значение для каждого цвета в палитре, которое, фактически, означает, что используется RGBA-палитра, а не RGB-с-одним-исключением (with-one-exception), как GIF. Это позволяет варьировать прозрачность цвета в больших пределах, сохраняя преимущества 8-битного изображения перед 32-битным.

PNG могут также содержать только один уровень прозрачности, совсем как GIF89a. Алгоритм сжатия PNG для повторяющихся горизонтальных шаблонов совпадает с LZW-сжатием в GIF.
Многослойный PNG-файл также может быть отображен на экране по загрузке только 25% всего файла, в то время как GIF требует загрузки 50% размера перед распознаванием. За исключением весьма редких случаев замена GIF-изображений на PNG-эквиваленты способна существенно уменьшить их размер.

Ниже приведены некоторые из возможностей PNG-формата:

• 8-битные (индексированная палитра), 16-битные серые или 48-битные полноцветные изображения.
• Градация альфа-прозрачности до 16 битов.
• Гамма-коррекция (хотя эта возможность может быть проблематичной).
• Улучшенный по сравнению с LZW алгоритм сжатия.
• Двумерная схема для многоуровневых изображений (Adam7).
• Метаданные (сжатые или несжатые).
• Формат, свободный от патентов.

Поддержка PNG в браузерах

В Netscape естественная поддержка PNG весьма ограничена начиная с версии 4.04, для Internet Explorer она зависит от операционной системы. Для Macintosh IE полностью поддерживает PNG с версии 5.0 (в том числе, включая альфа-канал).
MSIE для Win32 и Unix обладает естественной поддержкой PNG (на деле же, весьма посредственной) начиная с 4.0, но не поддерживает альфа-канал до версии 7.0. На данный момент большое количество разнообразных браузеров также поддерживает PNG, однако, лишь с 1-битной прозрачностью, что позволяет использовать PNG для замены неанимированных GIF. Именно поэтому мы переключились несколько месяцев назад на PNG-формат для нашего отчета по использованию канала и этой колонки по увеличению скорости.

PNG и проблема соответствия для фоновых CSS-изображений

К несчастью, поддержка возможностей PNG-гаммы и цветовой коррекции является не кросс-браузерной. Наиболее часто рекомендуемой мерой для исправления возможных ошибок будет исключение фрагментов, обеспечивающих гамму и цветовую коррекцию, для создания «неименованного» PNG.
Это решает проблему цветового соответствия для современных браузеров, кроме Safari под Mac до OS 10.4.

Для standalone PNG-изображений (которые мы используем) это совсем не проблема, но для дизайна веб-страниц, который требует точного соответствия между CSS-фоном и PNG, к сожалению, это имеет место.
Пока все эти проблематичные браузеры не канут в лету, мы можем использовать, логичным образом, только неименованные standalone PNG и GIF или JPEG когда требуется четкое соответствие цветов.

Анимированные PNG: MNG против «PNG»

Формат составной сетевой графики (Multiple Network Graphics, MNG) представляет собой несколько PNG-изображений, по аналогии с GIF89a. Однако, MNG-формат является более сложным и не поддерживается текущими браузерами (для этого нужно использовать бесплатное расширение libmng).
Сейчас группа разработчиков Mozilla пытается расширить текущий (для одного изображения) PNG-формат несколькими дополнительными кадрами для анимации.

Существует также встречное предложение со стороны членов группы PNG, подразумевающее создание чего-то подобного, однако, не противоречащего спецификации PNG. Оба этих направления значительно проще, чем MNG, и оба открыты для голосования в группе PNG. Сейчас же для анимации изображений лучше всего использовать GIF89a или Flash (замечу, что для простых эффектов, типа смены слайдов, разумнее использовать DHTML-анимации).

Двигаемся к маленьким PNG

PNG работает лучше с большими однотонными областями. Чтобы увеличить степень сжатия, стоит уменьшить количество «шума» в ваших картинках для увеличения размеров однотонных областей.
Уменьшайте области размывания (dithering), хотя для изображений с градиентами размывание позволяет использовать меньшую глубину цвета.
Избегайте сглаживания (anti-aliased) текста для уменьшения числа цветов, которые для него необходимы, в финальном изображении.
По возможности, уменьшайте число цветов в вашем исходном изображении, если вы можете контролировать этот фактор.
Избегайте использования многослойных PNG-изображений для уменьшения размера файла, так как семипроходная многослойная схема может добавить от 20% до 35% к размеру PNG-файла.
Наконец, можно использовать специальное программное обеспечение для оптимизации PNG-изображений, которое специально разрабатывается с этой целью, например, PNGOut от Ken Silverman.

GIF против PNG: конкретные примеры

Для того, чтобы увидеть улучшения от переключения с GIF на PNG, достаточно посмотреть на простые примеры (Рисунок 1).
PNG-версия графика широкополосного доступа на 35,6% меньше, чем он же в GIF-формате.

Мы также протестировали упрощенную столбчатую диаграмму в двух разных программах: Imageready и PNGOut. 8-цветный PNG, созданный в Imageready, на 79% меньше, чем эквивалентный GIF (470 байтов против 2275). PNGOut позволил уменьшить этот PNG до 336 байтов, всего на 85,2% меньше, чем исходный GIF! Наверное, мы проведем более глубокое исследование программных оптимизаторов графики в будущем.

Используемые источники