PNG-24. Разделяем изображение на PNG-8 и PNG-24

Автор: Евгений Рыжков Дата публикации:

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

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

Зачем

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

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

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

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

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

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

На этом месте должен был быть замечательный видео ролик. Раз читаешь этот текст, ты его не видишь. Может у тебя не установлен или отключен flash. А может еще по какой-то не ведомой нам причине. Попробуй установить/включить flash, если не поможет, напиши нам.

Установить свежую версию Flash

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

Заметка

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

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

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

По теме

Материалы

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

Xiper