Прикладные техники оптимизации PNG

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

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

1. Выбор правильного формата

png_2_2

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

В этом случае стоит рассмотреть вариант либо совмещения PNG-изображения с фоном для сохранения в формате JPEG, либо генерации набора изображений (с различными фонами) — опять-таки для финального сохранения в формате JPEG. В большинстве случаев полноцветное изображение в JPEG будет в 2-3 раза меньше по размеру PNG-эквивалента.

2. Удаление чанков

png_2_3

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

Первый из них: это удаление мусора в мета-информации (неиспользуемых чанков) и в используемой палитре (неиспользуемых цветов). Важными являются IHDR, IDAT и IEND-чанки. Все остальные содержат вспомогательную информацию (но, например, удаление чанка gAMA приводило к «порче» изображений в браузере Safari старых версий). Чанки с комментариями, датой изменения и цветовыми профилями (для полиграфии) можно смело вычищать: для браузера это бесполезный набор символов.

3. Правильный выбор палитры

png_2_4

Существует 6 вариантов формата PNG для разных задач: серая палитра, цветная палитра (256 цветов), полноцветная палитра, и дополнительно каждый вариант может включать прозрачность. Правильный выбор палитры и прозрачности позволяет сократить размер PNG изображения. Если у вас меньше 256 цветов, то всегда выбирайте PNG8 и следите за прозрачностью (некоторые редакторы не умеют сохранять полупрозрачность для PNG8).

Если изображение содержит исключительно оттенки серого, то ваш выбор — Grayscale.

Если в изображении больше 256 цветов — попробуйте преобразовать его к PNG8. Возможно, деградация качества будет незаметной. Если цветов слишком много — рассмотрите вариант с форматом JPEG. Если и это невозможно, то выбирайте TrueColor и следите за прозрачностью.

4. Оптимизация альфа-канала

png_2_5

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

Дополнительно можно использовать размытие (Dithering), чтобы сгладить малое количество цветов при полупрозрачности.

5. Оптимизация фильтров

png_2_6

Основная «рабочая лошадка» оптимизации PNG – это выбор правильного набор фильтров для каждой строки (PNG изображение кодируется построчно), который обеспечит минимальный общий размер изображения. Фильтры в PNG достаточно простые: они предсказывают соседние пиксели и представляют, по сути, расширенную версию сжатия данных.

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

6. Оптимизация сжатия

png_2_7

Почти финальный пункт, где еще можно «дожать» PNG – это сжатие. Благодаря открытому формату (в отличие от GIF), PNG поддерживает большое количество алгоритмов сжатия, в частности, zlib, 7-zip, Kzip, zopfli. Разные утилиты оптимизируют изображения разными способами, и оптимизация за счет сжатия должна идти всегда в финале: уже после выбора палитры, прозрачности и оптимизации фильтров. Хотя иногда менее оптимальные наборы фильтров могут дать в совокупности с другим сжатием меньший по размеру файл.

Оптимизация сжатия данных применяется следующими утилитами: optipng, TruePNG, PNGwolf, AdfDef, PNGout.

7. WebP: легковесная альтернатива

png_2_8

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

В заключении рекомендую следующий справочник по утилитам оптимизации PNG, которые могут дополнить ваш арсенал инструментов оптимизатора: PNG Tools Overview.

preview Как понять, чего хотят пользователи сайта, и дать им это

Как понять, чего хотят пользователи сайта, и дать им это

Пользоваться теплокартами - это как быть Джеймсом Бондом, только без Aston Martin, - вы шпионите за вашими пользователями и видите все, что они делают на вашем ресурсе: как...
preview Как найти страницы, непроиндексированные Google

Как найти страницы, непроиндексированные Google

В статье автор делится тонкостями настройки специального скрипта на Python, который поможет справиться с этой задачей
preview Полное руководство по оптимизации страниц товаров

Полное руководство по оптимизации страниц товаров

Как превратить страницы товаров в лендинги для релевантных поисковых запросов? Об этом пойдёт речь в статье
preview Неудобная безопасность

Неудобная безопасность

Веб-мастера и владельцы сайтов, уже имеющие опыт защиты веб-проектов, знают, что комплексная безопасность сайта – это не разовое действие, а непрерывный процесс
preview Легкий способ управлять сниппетами

Легкий способ управлять сниппетами

Недавно на Searchengines вышел перевод статьи о влиянии CTR на ранжирование в Google, основной тезис которой в том, что необходимо заниматься оптимизацией CTR по 3-м причинам...
preview Оптимизация под RankBrain: нужно ли этим заниматься?

Оптимизация под RankBrain: нужно ли этим заниматься?

Возможна ли оптимизация под RankBrain? Этот вопрос стал темой одного из последних выпусков Whiteboard Friday в блоге Moz