Алгоритмы уменьшения изображений

3.3. Оптимизируем PNG (Portable Network Graphics)

История PNG началась 4 января 1995 года, так что это самый молодой из поддерживаемых всеми браузерами растровых форматов. Формат обеспечивает глубину цвета до 48 бит, полупрозрачность (альфа-канал), гамма-коррекцию изображения, двумерный чересстрочный режим и использует лучшие, по сравнению с GIF, алгоритмы сжатия изображений.

Формат, так же как и GIF, поддерживает индексированную палитру и бинарную прозрачность, что позволяет использовать PNG для хранения как полноцветных изображений без искажений, так и изображений с малым количеством цветов.

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

На текущий момент APNG поддерживают Opera (с версии 9.5) и Mozilla Firefox (версия 3.0 и выше).

3.3.1. Проблемы отображения PNG в браузерах

К сожалению, использование формата тормозит один из распространенных браузеров — Internet Explorer. Все версии этого браузера, начиная с четвертой (где впервые появилась поддержка), имеют проблемы в отображении PNG:

• Internet Explorer 4.0 падает при открытии определенных PNG;
• Internet Explorer 5.0 и 5.01 не отображают PNG через тег object;
• версия 5.01 иногда неверно отображает изображения с черным (или темно-серым) задним фоном в Windows 98;
• больше всего проблем по поддержке PNG у версии 6.0: проблемы с открытием файлов размером 4097 и 4098, файлов с пустыми секциями IDAT (которые были исправлены в SP1), проблемы с отображением полупрозрачности (они решаются при помощи специальных приемов, но это сказывается на производительности);
• Internet Explorer 7.0 и 8.0 не поддерживают альфа-канал вместе с фильтром полупрозрачности;
• ни одна версия этого браузера не поддерживает полностью гамма-коррекцию и коррекцию цвета.

Впрочем, у остальных браузеров тоже не все гладко, хотя список их прегрешений не столь впечатляет:

• реализация коррекции цвета PNG появилась только в Firefox 3, где она была отключена в настройках вплоть до версии 3.5;
• WebKit (на котором основаны Safari и Google Chrome) имел в различных версиях проблемы с отображением полупрозрачности в PNG;
• в Opera поддержка полупрозрачности появилась только в версии 6.0, а проблемы с гамма-коррекцией сохранялись до версии 6.1, в современных же версиях есть всего один недостаток, который вряд ли может считаться фатальным: чересстрочные PNG, использующие полупрозрачность, показываются только после полной загрузки.

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

Оба метода обладают недостатками. Применение фильтров вообще и AlphaLoader в частности приводит к повышенному расходу памяти и ухудшению времени отклика браузера. Для иллюстрации проблемы можно привести исследование Стояна Стефанова (http://ap-project.org/Russian/ Article/View/83/Russian translation/), где рассматривалось сто иллюстраций с фильтром и без него. Использование фильтров увеличило время от-рисовки страницы в 27 (!) раз, а размер задействованной памяти — в 78(!) раз.

Использование VML несет с собой другие проблемы: изображения, загруженные через VML, иногда не кэшируются, требуют специальной разметки и их сложно применять как фоновое изображение, кроме того, скорость инициализации оставляет желать лучшего.

Так что для старых версий Internet Explorer рекомендуется пользоваться, где возможно, PNG с индексированными цветами и бинарной прозрачностью вместо полупрозрачности, прибегая к VML и AlphaLoader только в крайних случаях. Кстати, в последнем случае будет полезно посмотреть на библиотеку DDbelatedPNG (http://dillerdesign.com/experiment/ DD belatedPNG/).

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

Разработчикам PNG это показалось неправильным. Они ввели в формат несколько полей, куда записываются характеристики машины и операционной системы, на которой создано изображение. В дальнейшем, если параметры оборудования или ОС на машине, где изображение показывается, отличается, производится специальная коррекция.

Идея хорошая, но в вебе помимо PNG используются и другие форматы, в которых такая коррекция не применяется. Это приводит к тому, что стык PNG с JPEG может отличаться по цвету в Mac OS, если оба изображения готовились под Windows.

Можно не использовать PNG вообще и не задумываться о таких проблемах, альтернатива — удалить из файла всю цветокорректирующую информацию. Утилита optipng делает это по умолчанию, но можно для той же цели применить устаревшую во всех отношениях утилиту PNGcrush:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png J outfile.png

К счастью, новые версии Adobe Photoshop (начиная с CS4) не записывают в файл эту информацию, GIMP же не заполняет поле gAMA, без которого браузеры коррекцию не производят.

3.3.2. Выбор типа PNG

PNG, как уже частично рассматривалось выше, умеет хранить несколько типов изображения: полутоновое изображение (оттенки серого) с глубиной цвета 8 бит, цветное индексированное (восьмибитовая палитра цветов глубиной 24 бита) и полноцветное изображение с глубиной 48 бит.

Кроме того, в PNG есть два типа прозрачности: полупрозрачность (256 уровней альфа-канала) и бинарная прозрачность (как в GIF — либо 100% прозрачно, либо нет).

Большей частью выбор типа изображения очевиден, но есть тонкости.

Изображение, содержащее исключительно оттенки серого (так называемое "черно-белое"), выгоднее всего сохранять в специально предназначенном для этого формате с глубиной цвета 8 бит. Из-за того, что компоненты цвета записываются меньшим количеством байт, файл занимает меньше места.

В редакторе Adobe Photoshop для сохранения изображения в файле этого типа нужно воспользоваться инструментом "Save As..." ( Shift+Ctrl+S ), а не "Save for Web" ( Alt+Shift+Ctrl+S ), последний этот тип формата не поддерживает. Конечно, чтобы Photoshop понял, что нужно сохранить именно с такой глубиной цвета, режим изображения должен быть "Grayscale" ( Image — Mode — Grayscale ).

Рис. 3.9. Рис. 3.9. Слева фотография, сохраненная с глубиной цвета 24 бита (349 Кб),справа — 8 бит (253 Кб)

Редактор GIMP также умеет сохранять такие изображения правильно. Если выбранный вами редактор этого делать не умеет — не беда, можно использовать утилиты OptiPNG или PNGout (их мы еще рассмотрим ниже), умеющие понижать глубину цвета:

optipng -o7 dog.png -out dog-optimized.png pngout /c0 dog.png dog-optimized.png

Другая особенность относится к сохранению картинок с малым количеством цветов и без прозрачности — некоторые изображения занимают меньше места в PNG с глубиной в 24 бита, чем при использовании индексированной палитры. В основном это касается градиентных изображений.

Сергей Чикуенок, специалист по оптимизации изображений, советы которого легли в основу этой лекции, объясняет это тем, что в полноцветных изображениях цвет описывается тремя байтами (RGB), тогда как в формате с индексированными цветами — четырьмя (RGB + один байт в палитре). Помимо этого само изображение может быть настолько эффективно сжато, что добавление к файлу таблицы палитры (которая не сжимается) может чувствительно увеличить его размер.

Существенную экономию дает в некоторых случаях малоизвестная возможность PNG — использование полупрозрачности в файлах с индексированной палитрой, где каждый элемент палитры описывается не тремя составляющими (RGB), а четырьмя — RGBA (красный, зеленый, голубой и альфа-канал).

Рис. 3.10. PNG с индексированной палитрой и полупрозрачностью в Internet Explorer 6.0 и в остальных браузерах

Редактор Photoshop, опять же, не поддерживает этот формат, но optiPNG автоматически преобразует изображения с полупрозрачностью, содержащие 256 цветов и меньше, в файл такого типа. Полноцветные изображения при желании можно преобразовать утилитой "Improved PNGNQ", которая уменьшает количество цветов до указанного (от 16 до 256) и сразу преобразует файл в рассматриваемый тип.

Интересно поведение Internet Explorer 6.0 при отображении файлов такого типа. Как известно, полупрозрачность в PNG он не поддерживает, а такие файлы, без применения хаков, отображает как GIF — с бинарной прозрачностью, что лучше, чем серый цвет, которым IE заполняет прозрачные области обычных PNG.

3.3.3. Автоматическая оптимизация

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

Для тестирования были выбраны три утилиты: PMT (PNGcrush), optiPNG и PNGout. Поскольку pngout не умеет сама перебирать методы оптимизации, для нее был написан небольшой командный файл, использующий для перебора optiPNG (метод взят с блога blog.ad.by):

@ECHO OFF IF "%1"=="" EXIT 1
FOR /F "usebackq delims==,IDAT tokens=5" %%i in J
('optipng -o4 -full -sim	DO SET f=%%i
IF "%2"=="" (
pngout /k0 /n2 /f%f:—1,1%	|| EXIT 3
) ELSE (
pngout /k0 /n2 /f%f: —1,1% "%1" "%2" || EXIT 3
)

Для тестов мы взяли по 10 иллюстраций каждого типа: фотографии (глубина цвета — 24 бита), полноцветные синтетические (глубина цвета — 24 бита), синтетические с градациями серого (8 бит) и с индексированной палитрой (8 бит).

* неожиданно плохие результаты PNGoutwin на изображениях серого объясняются просто: программа не справилась с понижением глубины цвета до 8 бит; если понизить глубину заранее (выше было рассмотрено, как это делается), то PNGoutwin справляется с заданием успешнее всех — 2,56 Мб (24%).

По всей видимости, на первое место стоит поставить платную программу PNGoutwin, на второе — PNGout (в паре с optiPNG для подбора параметра оптимизации изображения), а аутсайдером по качеству является PNGcrush.

3.3.4. Оптимизация через Lossy GIF

Конечно, для оптимизации изображения PNG можно применять все те же методы, что и для GIF, — например, уменьшение количества цветов; рассматривать здесь дважды один и тот же материал смысла не имеет.

Даже настройки сохранения PNG с индексированной палитрой в Adobe Photoshop те же, но не хватает одного инструмента — "Lossy". Как вы, наверное, помните из части про оптимизацию GIF, этот инструмент вносит горизонтальные искажения, и изображение лучше сжимается.

В случае PNG это правило тоже иногда действует, но соответствующего инструмента нет. Выход один — сохранить изображение сначала в GIF, а потом преобразовать в PNG.

3.3.5. Постеризация

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

В Photoshop инструмент для постеризации изображения вызывается Image — Adjustments — Posterize, в GIMP — Color — Posterize.

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

Способ очень простой, но есть неудобство: результатом постериза-ции управлять невозможно, но есть немало более управляемых способов снизить количество цветов в изображении.

Простое снижение количества цветов в Photoshop

Первым делом нам понадобится плагин PhotoFreebies plugin suite, скачать который можно с сайта производителя.

Рис. 3.11. Исходное изображение (226,3 Кб)

Откроем исходное изображение в Photoshop и создадим его дубликат ( Image — Duplicate ), удалим из дубликата информацию о прозрачности ( Filter — Photo Wiz — Remove Transparency ) и сменим режим на "Индексированные цвета" ( Image — Mode — Indexed Color ).

В появившемся окне выбираем 50 цветов: этого достаточно, чтобы львенок смотрелся приемлемо, а также убираем галочку "Preserve Exact Colors". Там же выбираем режим Diffusion параметра Dither и устанавливаем Amount в 30% (так как цветов в этом изображении мало, то эта величина ни на что не влияет, в других изображениях ею можно контролировать качество замены недостающих цветов).

Следующий шаг — меняем режим обратно на RGB и копируем изображение в оригинальный файл в отдельный слой, который должен располагаться поверх оригинального. Используем нижний слой как маску ( Alt+Ctrl+G ) и сохраняем полученное изображение.

В данном случае картинка с львенком стала занимать 164,5 Кб, сократившись на 27%.