Примечание: ниже приведен перевод статьи "Replace GIF with PNG Images" о том, в каких случаях стоит использовать PNG-формат вместо GIF. Мои комментарии далее курсивом.
Переносимый сетевой графический формат (Portable Network Graphics, PNG) разрабатывается как более эффективная, гибкая и свободная от патентов замена GIF-формату. PNG был задуман для хранения отдельных растровых изображений для дальнейшего распространения по компьютерным сетям (1). PNG был создан в 1995 в ответ на давление со стороны Unisys и их патента на алгоритм LZW-сжатия, используемый в GIF. Хотя срок действия патента Unisys уже закончился, причины на переход от GIF к PNG остались, практически, прежними (2). Заменив ваши GIF-изображения теми же самыми, но в формате PNG, вы можете ускорить загрузку ваших страниц и сэкономить трафик ваших пользователей.
PNG использует алгоритм deflate-сжатия обычно с 32Кб скользящим (sliding) окном. Deflate является улучшенной версией алгоритма сжатия Lempel-Ziv (LZ77), который используется в ZIP- и GZIP-файлах (3, 4). Созданный Phil Katz для второй версии PKZip, deflate совмещает LZ77 с кодированием Huffman и является от 10% до 30% более эффективным, чем LZW при сжатии без потери информации. Так же, как и GZIP, некоторые инструменты по PNG-сжатию предполагают опциональный параметр «степень сжатия», которая варьируется от 1 до 9. По умолчанию выставляется 6. 9 является практически всегда лучшим выбором для максимального сжатия.
Не удивительно, что изображения, сохраненные как PNG, обычно от 10% до 30% меньше, чем GIF, хотя в некоторых редких случаях они могут быть больше по размеру (5, 6). В нашем тестировании мы обнаружили, что часть картинок могут быть сжаты от 40% до 50% или даже больше (до 85% для одного примера), в зависимости от изображения. По большей части изображения с большими однотонными областями сжимаются лучше, чем градиентные с большим количеством переходов между цветами.
В PNG присутствует набор возможностей, которые делают его привлекательным для медицинской и графической отраслей. Fireworks использует PNG-формат для хранения внутренних файлов, а поддержка в PNG 16-битной серой шкалы прекрасно подходит для создания точных радиологических изображений. PNG предварительно фильтрует данные по конкретному изображению при помощи предсказательных функций. Одной из них является «Вверх» (Up), которая ищет похожие наборы данных в вертикальных шаблонах для полноцветных PNG. PNG с индексированными цветами (8 битов или меньше) обычно не выигрывает от использования фильтрации, поэтому стоит использовать «ничего» (none), если есть возможность для выбора. Для полноцветовых или серых изображений стоит использовать «Адаптивный» (Adaptive).
«В основном, PNG используется для создания 24-битных RGB (даже финальных версий) сформированных изображений, например, картин с рассчитанным освещением (ray-traced scenes) с минимальным число текстур или математических объектов. Они все обладают искусственно сглаженными цветовыми переходами, которые хорошо работают с PNG-фильтрами. Некоторые фракталы могут вести себя таким же образом, но у многих из самых лучших примеров много достаточно «зашумленных» областей, которые сжимаются весьма слабо.» — Greg Roelofs (7)
Для Веба можно использовать PNG8 (8 бит), с помощью которого дизайнеры могут заменить существующие GIF-изображения. У PNG также может быть альфа-значение для каждого цвета в палитре, которое, фактически, означает, что используется RGBA-палитра, а не RGB-с-одним-исключением (with-one-exception), как GIF. Это позволяет варьировать прозрачность цвета в больших пределах, сохраняя преимущества 8-битного изображения перед 32-битным. PNG могут также содержать только один уровень прозрачности, совсем как GIF89a. Алгоритм сжатия PNG для повторяющихся горизонтальных шаблонов совпадает с LZW-сжатием в GIF. Многослойный PNG-файл также может быть отображен на экране по загрузке только 25% всего файла, в то время как GIF требует загрузки 50% размера перед распознаванием (8). За исключением весьма редких случаев замена GIF-изображений на PNG-эквиваленты способна существенно уменьшить их размер.
Ниже приведены некоторые из возможностей 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-гаммы и цветовой коррекции является не кросс-браузерной. Наиболее часто рекомендуемой мерой для исправления возможных ошибок будет исключение фрагментов, обеспечивающих гамму и цветовую коррекцию, для создания «неименованного» PNG. Это решает проблему цветового соответствия для современных браузеров, кроме Safari под Mac до OS 10.4. Для standalone PNG-изображений (которые мы используем) это совсем не проблема, но для дизайна веб-страниц, который требует точного соответствия между CSS-фоном и PNG, к сожалению, это имеет место. Пока все эти проблематичные браузеры не канут в лету, мы можем использовать, логичным образом, только неименованные standalone PNG и GIF или JPEG когда требуется четкое соответствие цветов.
Формат составной сетевой графики (Multiple Network Graphics, MNG) представляет собой несколько PNG-изображений, по аналогии с GIF89a. Однако, MNG-формат является более сложным и не поддерживается текущими браузерами (для этого нужно использовать бесплатное расширение libmng). Сейчас группа разработчиков Mozilla пытается расширить текущий (для одного изображения) PNG-формат несколькими дополнительными кадрами для анимации (9). Существует также встречное предложение со стороны членов группы PNG, подразумевающее создание чего-то подобного, однако, не противоречащего спецификации PNG. Оба этих направления значительно проще, чем MNG, и оба открыты для голосования в группе PNG. Сейчас же для анимации изображений лучше всего использовать GIF89a или Flash (замечу, что для простых эффектов, типа смены слайдов, разумнее использовать DHTML-анимации).
PNG работает лучше с большими однотонными областями. Чтобы увеличить степень сжатия, стоит уменьшить количество «шума» в ваших картинках для увеличения размеров однотонных областей. Уменьшайте области размывания (dithering), хотя для изображений с градиентами размывание позволяет использовать меньшую глубину цвета. Избегайте сглаживания (anti-aliased) текста для уменьшения числа цветов, которые для него необходимы, в финальном изображении. По возможности, уменьшайте число цветов в вашем исходном изображении, если вы можете контролировать этот фактор. Избегайте использования многослойных PNG-изображений для уменьшения размера файла, так как семипроходная многослойная схема может добавить от 20% до 35% к размеру PNG-файла. Наконец, можно использовать специальное программное обеспечение для оптимизации PNG-изображений, которое специально разрабатывается с этой целью, например, PNGOut от Ken Silverman.
Для того, чтобы увидеть улучшения от переключения с GIF на PNG, достаточно посмотреть на простые примеры (Рисунок 1). PNG-версия графика широкополосного доступа на 35,6% меньше, чем он же в GIF-формате.
Рисунок 1: GIF против PNG. Тестовые изображения
Imageready CS2 32-цветный выборочный GIF = 7,57 Кб
Imageready CS2 32-цветный выборочный PNG = 4,87 Кб
PNGOut сжимает PNG еще эффективнее, чем Imageready, получая изображение в 4,33КБ (на 11% меньше, чем Imageready, и на 42,8% меньше, чем GIF (рисунок 2).
Рисунок 2: версия PNGout того же самого тестового изображения, 4,33Кб, на 11% меньше, чем Imageready
Мы также протестировали упрощенную столбчатую диаграмму в двух разных программах: Imageready и PNGOut. 8-цветный PNG, созданный в Imageready, на 79% меньше, чем эквивалентный GIF (470 байтов против 2275). PNGOut позволил уменьшить этот PNG до 336 байтов, всего на 85,2% меньше, чем исходный GIF! Наверное, мы проведем более глубокое исследование программных оптимизаторов графики в будущем.
Рисунок 3: Сравнение тестового изображения в GIF и PNG, созданных в Imageready и PNGOut
Imageready, 8-цветный GIF = 2275 байтов
Imageready, 8-цветный PNG = 470 байтов
PNGOut, 8-цветный PNG = 336 байтов