Формат PNG самый «младший» среди популярных форматов web-графики; Поэтому он пока не достаточно широко распространен. Однако его возможности позволяют предположить, что в будущем производители программного обеспечения и разработчики web-страниц уделят ему больше внимания.
По своим характеристикам этот формат похож на GIF, что неудивительно — ведь PNG разрабатывался как его альтернатива. PNG поддерживает следующие функции:
хранение цветных изображений с глубиной цвета до 48 битов (в GIF — до 8 битов);
хранение монохромных изображений (до 16 битов на пиксел);
поддержка переменной прозрачности — до 256 градаций (в формате GIF каждый пиксел или прозрачен, или нет);
сжатие изображения без потерь;
использование фильтрации для оптимизации сжатия (в GIF отсутствует);
возможность чересстрочного вывода изображений на экран;
встроенные средства обнаружения ошибок передачи данных (в GIF отсутствует);
средства цветокоррекции (в GIF отсутствуют);
сохранение уменьшенной копии изображения.
В отличие от GIF, формат PNG является свободно распространяемым для использования. Это значит, что его поддержку в программном обеспечении можно вводить без оплаты каких-либо лицензий. Для сжатия изображения в формате PNG используется алгоритм LZ78 — предшественник LZW, используемого в формате GIF. К недостаткам PNG по сравнению с GIF можно отнести невозможность сохранения в одном файле нескольких изображений и создания анимации.
Файл, сохраненный в формате PNG, имеет блочную структуру, это делает его похожим на формат TIFF. Любая программа, поддерживающая стандартный формат PNG, должна работать с четырьмя типами блоков:
блок заголовка содержит основные параметры изображения. Файл не может иметь больше одного заголовка;
блок палитры определяет палитру цветов, используемых в изображении. Этот блок используется только если палитра необходима (изображение сохранено в режиме индексированных цветов);
блок изображения содержит данные об изображении;
блок конца изображения замыкает файл PNG.
Кроме этих блоков файл может содержать дополнительные данные, такие как информация об авторе, текстовые комментарии (в том числе сжатые), информация о контрасте и гамма-коррекции, информация о прозрачности (альфа-канал) и т. д. При введении новых возможностей можно легко добавить в файл новый блок. При этом старые программы просто «не обратят на него внимания». Это предоставляет возможность легкого расширения формата.
Само изображение может сохраняться в различных режимах. Например, Adobe PhotoShop поддерживает режимы RGB (16 млн цветов), оттенки серого (256 градаций) и индексированные цвета (256 цветов).
Прозрачность изображения сохраняется в виде альфа-канала, позволяющего отобразить до 256 градаций прозрачности. Это позволяет реализовать плавный переход от изображения к фону и избежать появления «ореола» на границе прозрачности. На рис. 2.9 приведен пример такого наложения. Слева приведена исходная картинка, в центре — фон, справа — результат.
Рис. 2.9. Результат наложения изображения с плавным изменением прозрачности на фон
На рис. 2.10 изображен результат наложения на тот же фон изображения, сохраненного в формате GIF.
Рис. 2.10. Наложение на фон изображения с двумя значениями прозрачности (или она есть, или ее нет)
ПРИМЕЧАНИЕ. В браузерах отображение плавно изменяющейся прозрачности пока не реализовано.
При сохранении картинок в формате PNG можно использовать чересстрочные изображения и различные фильтры, позволяющие оптимизировать сжатие. Чересстрочное изображение выводится не построчно (как при чтении формата GIF), а прямоугольными блоками (вначале блоками 8x8, потом — 4x8, 4x4, 2x4, 2x2, 1x2). Такой алгоритм носит в честь своего изобретателя название Adam? К сожалению, далеко не все браузеры корректно обрабатывают возможности этого формата. На рис. 2.11 показано, как файлы в формате PNG отображаются браузером Internet Explorer.
Фильтры позволяют подготовить данные (оптимизировать их) и тем самым повысить степень сжатия. Фильтрация применяется к байтам цветовых составляющих пикселов построчно. К каждой строке можно применить свой алгоритм или вообще не применять его. Существует несколько разновидностей фильтров:
Рис. 2.11. Отображение страницы с рисунками в формате PNG в процессе загрузки
Sub определяет разность между значением байта для текущего пиксела и аналогичным значением для предыдущего пиксела;
Up определяет разность между значением байта для текущего пиксела и аналогичным значением для предыдущего пиксела;
Average — значение для текущего пиксела прогнозируется на основе среднего значения, полученного для пикселов, расположенных слева и сверху от текущего;
Paeth — значение прогнозируется на основе значения линейной функции, полученной из значений левого, верхнего и левого верхнего пикселов.
В некоторых случаях фильтрация позволяет уменьшить размеры файла, однако для каждого изображения метод фильтрации следует подбирать индивидуально.
Кроме различных алгоритмов фильтрации, к изображению могут быть применены встроенные средства цветокоррекции. Для PNG это указатель гамма-коррекции (позволяет скорректировать цвета в соответствии с яркостью монитора), информация о контрасте, а также сведения об основных цветах и «белой точке». Основные цвета и белая точка задаются координатами в стандартном цветовом пространстве. Все эти параметры позволяют улучшить качество изображения, воспроизводимого на компьютере пользователя.
Мы рассмотрели характеристики формата PNG. Для того чтобы составить полное представление о его сфере применения, проведем тестирование. На рис. 2.12 приведены три тестовые картинки. Рисунок 2.13, а представляет собой пример рисунка, состоящего из четких линий (схемы или чертежа). Рисунок 2.13, б — фотография, содержащая большой участок с плавным изменением цвета (небо). Рисунок 2.13, в — фотография с большим числом мелких деталей. Размеры исходных файлов в формате TIFF: от 127 до 129 Кбайт.
а
б
в
Рис. 2.12. Тестовые изображения для сравнения возможностей форматов GIF, JPEG и PNG
Для сравнения возможностей различных форматов сохраним все эти изображения в файлах GIF, PNG и JPEG. В данном случае использовались форматы GIF и PNG в нормальном и чересстрочном режиме, а в формате JPEG картинки сохранялись с показателем качества (по шкале Adobe PhotoShop), равным 7. При этом на всех изображениях наблюдались небольшие шумы (особенно на границах объектов). Сравним размеры полученных файлов.
Таблица 2.1. Размеры файлов, полученных после сохранения тестовых изображений в различных форматах, Кбайт
Формат
Схема или чертеж
Фотография с плавными цветовыми переходами
Фотография с большим числом мелких деталей
GIF (нормальный)
3,2
21,7
44,5
GlF (чересстрочный)
3,23
24,9
PNG (256 цветов, нормальный)
3,27
23,7
40,6
PNG (16 млн цветов, нормальный)
4,68
67,8
PNG (16 млн цветов, чересстрочный)
7,06
75,6
JPEG
4,69
5,03
12,4
Эта таблица позволяет судить об оптимальной сфере применения каждого из форматов. Как видно, форматы GIF и PNG дают явный выигрыш при сохранении рисунков с небольшим числом цветов и большими однотонными областями (схем, диаграмм). Причем GIF обеспечивает несколько лучшее сжатие. Так как используемые в этих форматах алгоритмы сжатия не вносят помех в изображение, можно не опасаться, что мелкие детали схемы будут потеряны или искажены. Чересстрочные изображения, хотя и являются более наглядными для пользователя, занимают больше места, чем не чересстрочные. Для сохранения полноцветных изображений наилучшим образом подходит формат JPEG. Хотя он вносит в рисунок некоторые искажения, подбирая степень сжатия можно свести их к приемлемому уровню. Файлы этого формата имеют в данном случае наименьший размер для всех изображений, кроме схемы. При сохранении подобных рисунков GIF и PNG показали лучшие результаты.
Также сравним эффективность использования различных фильтров, используемых в формате PNG.
Фильтры испытывались на примерах схемы (рис. 2.13, а) и фотографии с мелкими деталями (рис. 2.13, в). Для схемы применение фильтров не дало выигрыша в размере файла и даже наоборот — вызвало его увеличение на 0,5-1 Кбайт. В то же время, для фотографии «профильтрованные» файлы получились меньшими, чем «нефильтрованные». Для изображений с 16 млн цветов выигрыш составил около 10%. При этом изображения с 256 цветами на применение фильтра практически не реагировали.
Заканчивая разговор о формате PNG, можно сказать, что хотя в него заложены большие возможности, большинство из них в настоящий момент не реализованы в браузерах. Это препятствует росту его популярности. После введения его полной поддержки этот формат может занять достойное место в числе «инструментов» web-дизайнера.
