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

1. Заметил, что многие ребята используют полноцветный PNG (PNG-24 в фотошопе) только для полупрозрачных картинок, а индексированный PNG (PNG-8) — только для картинок с малым количеством цветов. На самом деле, для последнего случая довольно часто бывает более эффективным именно PNG-24:

   PNG-8 (833 байта)

   PNG-24 (369 байт)

   Если объяснять коротко, то для описания одного пикселя в PNG-24 используется 3 байта, а в PNG-8 — 4 байта (3 байта на цвет + 1 байт для элемента палитры). А в данном случае ситуация усугубляется еще и тем, что дельта-фильтры на саму палитру цветов не действуют (они действуют только на структуру изображения). В итоге получается, что в нашем случае в PNG-24 пиксели описываются не только меньшим количеством байт, но и более эффективно упаковываются фильтрами. Поэтому при сохранении картинок с малым количеством цветов и без прозрачности рекомендую проверять результат в PNG-8 и PNG-24. Как правило, разница в объеме будет заметна на градиентах.

2. PNG — довольно гибкий формат, способы хранения графической информации в нем не ограничиваются фотошоповскими PNG-8 и PNG-24. Например, можно сохранить изображение с 16 битами на канал (только это совсем не нужно для веба). Одна из возможностей этого формата, о которой мало кто знает, — это сохранение информации о прозрачности в индексированной палитре. Такой PNG-8 с честной полупрозрачностью. Весить такое изображение будет гораздо меньше, чем аналог в PNG-24. В этом случае каждый элемент палитры описывается не тремя (RGB), а четырьмя (RGBA) байтами, что означает, к примеру, что непрозрачный черный и прозрачный на 50% черный — это два разных цвета в палитре.
   
   

   Однако есть несколько нюансов. Во-первых, фотошоп не умеет сохранять PNG с RGBA-палитрой (более того, он до сих пор не умеет нормально их открывать). Умеет сохранять в таком формате, например, Adobe Fireworks. Во-вторых, своеобразное отображение таких изображений в IE6:

   PNG-8 с полупрозрачностью в IE6

   ...во всех остальных браузерах

   Отобразились только абсолютно непрозрачные пиксели, все полупрозрачные стали полностью прозрачными. Причем фильтр AlphaImageLoader не использовался: картинка накладывалась как обычный фон. Это гораздо лучше, чем серый цвет, заполняющий прозрачные области.

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

   До оптимизации: 5 537 байт

   После оптимизации: 6 449 байт

   Вот как выглядят цветовые слои этих изображений:

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

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

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

   — PMT (PNG and MNG Tools) — набор утилит для работы с PNG и MNG (анимированный PNG), в состав которых входит pngcrush, позволяющая, помимо оптимизации упаковки данных, удалять gAMA chunk. Именно из-за этого фрагмента PNG-файлы, сохраненные в фотошопе (до версии CS3), выглядели темнее в IE и Safari.

   — OptiPNG — утилита, созданная на базе pngcrush. Умеет автоматически понижать глубину цвета, если это возможно (к примеру, может перевести из RGB в greyscale, если в изображении используются только оттенки белого), и перебирать дельта- фильтры для наилучшего сжатия. Также сможет конвертировать полупрозрачное truecolor изображение в формат с индексированной палитрой (смотрите второй совет), что может привести к некорректному отображению картинки в IE6. Чтобы отключить автоматическое снижение глубины цвета нужно использовать параметр -nb.

   — PNGout — примечательна тем, что использует собственный deflate-компрессор, написанный Кеном Сильверманом (автор этой утилиты), который способен сжать файл в среднем на 5-10% лучше, чем pngcrush и PNGout. К сожалению, она не умеет автоматически перебирать параметры фильтрации и сжатия файла, их придется указывать вручную (PNGoutWin умеет, но стоит денег). Если хочется выжать все соки из компрессии файла, рекомендую сначала пропускать его через OptiPNG (для подбора оптимальной фильтрации), а затем через PNGout.

   — TweakPNG — позволяет увидеть структуру PNG-файла и удалить оттуда ненужные фрагменты (например, gAMA). Актуально, если вы пользуетесь фотошопом до версии CS3.

Для наилучшей оптимизации изображений недостаточно просто подергать ползунок «Качество» или запустить волшебную утилитку в надежде, что она сама все сделает. Очень важно знать особенности хранения данных в формате, в котором сохраняется изображение. Эти знания помогут правильно модифицировать картинку, чтобы она была упакована наилучшим образом. Я записал скринкаст, демонстрирующий несколько приемов оптимизации, которыми я постоянно пользуюсь, и достигаемый с их помощью результат.

Более подробных комментариев не будет: те, кто хорошо изучил особенности записи информации в PNG, и так поймут, что к чему. А остальным банальное запоминание последовательности действий все равно не позволит добиться каких-либо значимых результатов, потому что для каждой картинки нужна своя стратегия оптимизации. Подобный результат можно получить с помощью Image → Adjustments → Posterize, только картинка станет темнее, тяжелее и не такой удобной для оптимизации через OptiPNG.

Для желающих потренироваться:

— Исходник (Фотошоп, 3 МБ)

— Результат. Тут над файлом я поработал чуть дольше, поэтому весит он меньше и выглядит лучше

— Скринкаст (Квиктайм, 45 МБ)

Музыка: Amarok @ Art. Lebedev Studio