PNG-24. Разделяем изображение на основное (PNG-8) и контур (PNG-24)

Что будем делать

Разделим изображение с полупрозрачными участками на два: изображение с абсолютно непрозрачными участками и изображение, содержащее полупрозрачные участки.

Зачем

Сохранение изображения с абсолютно непрозрачными участкам как PNG-8, а которое содержит полупрозрачные участки — в PNG-24 позволяет в некоторых случаях ощутимо уменьшить вес картинки.

Почему это работает

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

PNG-24 имеет сглаженные контуры, т.к. присутствует полупрозрачность. Вес 382Kb

PNG-8 не имеет сглаженных контуров, что делает изображение не таким привлекательным. Вес 173Kb

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

Подытожу: начальный вес изображения был 382Kb. После разбиения изображения на две составляющие суммарный вес стал 221Kb (172Kb PNG-8 и 47Kb PNG-24). Выиграли 161Kb.

Заметка

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

Если с полученными изображениями еще немного «пошаманить» (оптимизировать насколько возможно PNG-8 в фотошоп, затем дооптмизировать оба изображения с помощью утилит вроде OptPNG) можно получить еще более интересный результат. У меня вышло сжать данное изображение до 88Kb (70Kb — PNG-8 и 18 — PNG-24).

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

По теме

• PNG-24. Устраняем лишнюю информацию
• Базовая оптимизация JPEG для веб
• Значение скорости загрузки сайта для бизнеса. Считаем деньги

Материалы

• Про PNG. Часть вторая
• Музыка — Paul VS Subway - What you want