Выбор типа PNG. Оптимизируем PNG (Portable Network Graphics). Алгоритмы уменьшения изображений
Выбор типа PNG
Автоматическая оптимизация
Оптимизация через Lossy GIF
Постеризация
Простое снижение количество цветов в Photoshop
Программа «Color quantizer» и маска повышения качества
Маска влияния в Adobe Photoshop
Уменьшаем детализацию
Невидимое не значит несуществующее
Разделение непрозрачных и прозрачных областей
Резюме
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).
Редактор GIMP также умеет сохранять такие изображения правильно, если выбранный вами редактор этого делать не умеет, не беда, можно использовать утилиты OptiPNG или pngout (их мы ещ? рассмотрим ниже), умеющие понижать глубину цвета:
optipng -o7 dog.png -out dog-optimized.png
pngout /c0 dog.png dog-optimized.png
Рис. 3.9. Слева фотография, сохран?нная с глубиной цвета 24 бита (349Кб), справа —8 бит (253Кб)
Другая особенность относится к сохранению картинок с малым количеством цветов и без прозрачности — некоторые изображения занимают меньше места в PNG с глубиной в 24 бита, чем при использовании индексированной палитры. В основном, это касается градиентных изображений.
Сергей Чикуёнок, специалист по оптимизации изображений, советы которого легли в основу этой главы, объясняет это тем, что в полноцветных изображениях цвет описывается тремя байтами (RGB), тогда как в формате с индексированными цветами — четырьмя (RGB + один байт в палитре). Помимо этого, само изображение может быть настолько эффективно сжато, что добавление к файлу таблицы палитры (которая не сжимается) может чувствительно увеличить его размер.
Существенную экономию да?т, в некоторых случаях, малоизвестная возможность PNG — использование полупрозрачности в файлах с индексированной палитрой, где каждый элемент палитры описывается не тремя составляющими (RGB), а четырьмя — RGBA (красный, зел?ный, голубой и альфа-канал).
Редактор Photoshop, опять же, не поддерживает этот формат, но optipng автоматически преобразует изображения с полупрозрачностью, содержащие 256 цветов и меньше в файл такого типа. Полноцветные изображения, при желании, можно преобразовать утилитой «Improved PNGNQ», которая уменьшает количество цветов до указанного (от 16 до 256) и сразу преобразует файл в рассматриваемый тип.
Интересно поведение Internet Explorer 6.0 при отображении файлов такого типа. Как известно, полупрозрачность в PNG он не поддерживает, а такие файлы, без применения хаков, отображает как GIF — с бинарной прозрачностью, что лучше серый цвет, которым IE заполняет прозрачные области обычных PNG.
Рис. 3.10. PNG с индексированной палитрой и полупрозрачностью в Internet Explorer 6.0 и в остальных браузерах