ТЕМА: PNG и JPEG. Сжатие картинок

После выхода МВ всё чаще стали идти разговоры про вес игр, а гневные комментарии о надобности сжатия картинок кажутся всё обоснованнее. Тем более, что одно из преимуществ МВ называют браузерность. Да и по специфики работы пришлось изучить этот вопрос. В связи с этим немного теории, рекомендаций, советов, фишечек. А начнем с истории возникновения самых известных из форматов.
GIF был разработан в 1987 году. 256 цветов и умение хранить данные без потери качества спустя два года дополнились поддержкой прозрачности и анимации. Сами создатели называли свое творение "джиф", но как в англоязычной среде, так и в русской прижилось название "гиф".

1991 год ознаменовался рождением JPEG. Поддержка всех цветов превозносила его над ГИФ, а эффективные методы сжатия - над TIFF и BMP.

К 1995-ому году хозяева "гифки" получили патент и стали требовать деньги за использования своего детища, что повлекло за собой разработку формата PNG, бесплатного и во многом более продвинутого своего конкурента. В отличии от ГИФ, ПНГ мог использовать полную цветовую палитру, да и алгоритмы сжатия были существенно продвинутее (подробнее об этом позже). При этом он также мог использовать прозрачность, в отличии JPEG.

Если алгоритм сжатия GIF максимально упростить, то получим следующую картину:
- обработчик проверяет каждый пиксель каждой строки
- каждый пиксель кодирует цифрой, означающий его цвет. При этом цвет в формате RGB хранится восьмизначным числом в десятичной системе либо же семи символами в 8-значной системе.
Схематично данный алгоритм можно показать здесь, где цифра 1 - первый цвет, 2- второй и т.д.



PNG действует немного иначе. Он точно также кодирует каждый пиксель цифрой, однако в начале каждой строки ставится так называемый "фильтр" - число, обозначающее, ЧТО же можно сделать с текущей строкой:
0 - None - оставить ее без изменения,
1 - Sub - к текущему значению прибавить значение левого пикселя,
2 - Up - прибавить верхний пиксель,
3 - Average - отнять среднее значение левого и верхнего пикселей,
4 - Paeth - подставить значение верхнего, левого или верхнего левого пикселя.

Таким образом квадратик выше можно представить следующим образом. Цифра в начале строки 2, а значит 2-5-ые строки будут соответствовать 1-ой строке



Или же закодировать картинку таким образом. Каждая последующая цифра строки суммируется с левой.



Чем эта информация пригодится? Однотонные картинки, либо картинка с градиентом будет весить в формате ПНГ в несколько раз меньше, нежели аналогичная картинка в ГИФ.

А что там у нас с JPEG?
- JPEG использует цветовую модель YCbCr, обладающую лучшим показателем сжатия, а потому формат RGB преобразуется именно в YCbCr. В нем Y - яркость, а Cr, Cb - хроматический красный цвет и хроматический синий соответственно. За счет меньшей чувствительности человеческого глаза к цвету, нежели к яркости, появляется возможность ужать цвета сильнее, что сэкономит вес картинки. Данный метод также применяется на телевидении.
- всё изображение делится на квадраты 8*8 пикселей.
- показатель яркости берется усредненный, показатели же цвета (Cr и Cb) берутся через одну строчку и через один столбец. Таким образом всё картинка "в цифрах" становится в два раза меньше.
Что нам это дает? На фотографиях с кучей цветов человеческий глаз практически не заметит разницы, так как разрешение фотографии крупное, пиксели мелкие и за счет размытия, игры света и прочих факторов, соседние пиксели практически сливаются. Однако в картинках с очень низким разрешением, с упором на контур и форму, данные метод сжатия дает о себе знать.

что в Фотошопе при качестве ниже 50 включается дополнительный алгоритм оптимизации — color downsampling. Суть его заключается в том, что дополнительно усредняется цвет в соседних восьмипиксельных блоках:
При очень сильном сжатии, при качестве ниже 50, алгоритм, рассказанный сверху может показать забавный результат. Наглядный пример этого на рисунке ниже. Верхний левый квадрат расположен ровно по сетке, а потому и его цвета сравниваются внутри сетки. Так как цвета одинаковые, то и все цвета мы получили такими же,как в оригинале. В квадрате ниже "всё смешалось в доме Обломовых". Он сдвинут на 2 пикселя вниз и влево, а потому черный пиксель сравнивался с пикселем белого цвета. Потому и цвета получились "усредненными". Потому для изображений с резким переходом цвета неизбежны появления так называемых "артефактов". Если конечно вы не выровняете каждую фигуру по сетке



Однако следует также сказать о том, что 100% качество JPEG ни в коем случае не обозначает сжатие без потерь качества. Это всего лишь максимально лучшее сжатие, своего рода "максимум, который может программа". В зависимости от программ и их алгоритмов, данный показатель несмотря на цифру 100, выдает различные результаты. А учитывая, что дополнительные алгоритмы, включающиеся при 100% практически ничего не меняют кроме веса, рекомендуется ставить качество не выше 95%. 8*8.

Вопреки частому заблуждению, PNG-8 и PNG-24 оба поддерживают прозрачность. Путаница возникает из-за того, что в некоторых программах (например, в SAI) PNG без альфа-канала (без прозрачности) называют PNG-24. ПНГ с прозрачность - PNG-32.
Отличия 8-битного ПНГ - количество цветов. Подобно ГИФу, он поддерживает от 2 до 256 и также, как у ГИФа цвета могут быть ЛЮБЫМИ из всей цифровой палитры. Отсюда следует вывод:
- для изображения с малым количеством цветов следует сжимать в PNG-8. Для пиксельных игр на мейкере это особенно актуально.
- для изображений с игрой света, обилием цветов нужен PNG-24.

Всё было бы совсем просто, если бы не одна деталь - для кодирования цвета PNG-24 используется 3 байта, а PNG-8 — 4 байта (3 байта на цвет + 1 байт для элемента палитры). А потому для сжатия картинки залитой полностью одним цветом, пусть даже он будет с градиентом, сжать будет эффективнее именно PNG-24. Для примера можете создать слой 40*40 и залить его полностью черным. Вес "8-битного" ПНГ будет 136 байта. Весь 24-битного - 124.

Для любителей заморочиться существует еще один интересный способ сжатия картинок с полупрозрачными областями на прозрачном фоне.
- открываем картинку фотошопом и выделяем объект на картинке (CTRL+левая кнопка мыши)
- в палитре каналов (справа от вкладки со слоями) создаем новый канал из выделения нажатием на соответствующую кнопку (скрины прикреплю позже)
- нажатием на Ctrl+D снимаем выделение
- применяем Threshold (в меню Image - >Adjustments -> Threshold)
- вставляем данный объект канала в новый слой путем Layer -> New -> Layer via Cut
Теперь у нас два слоя - в одном полупрозрачные пиксели, в другом - непрозрачные. Слой с непрозрачными пикселями сохраняем в PNG-8, а с полупрозрачными — в PNG-24. Таким образом можно уменьшить вес и без того маленькой картинки в еще более мелкую.
В мейкере подойдет для статичных объектов в параллакс-мапинге (домики, дороги, деревья). А вот что больше повлияет на производительность мейкере - меньший вес картинок с увеличением кол-ва слоев или мало слоев с тяжелыми картинками - вопрос уже другой.

Фотошоп конечно хорош и удобен, однако перевести из RGB в greyscale (иначе, понизить глубину цвета, переведя его в черно-белые тона) в нем нельзя. Хотя для игр с серой цветовой палитрой этот метод наверняка подойдет (вспомним помехи "гравюрного"). Во всех тонокстях программ разобраться сложно и я до них еще не дошел, а потому просто перечислю программы, начав с той, которая как-раз и может помочь гравюрному:

OptiPNG

PMT

PNGout сайт выглядит ужасно, но программа использует свой способ сжатия. Платная версия позволяет перебирать методы характеристики сжатия, в бесплатной же придется всё делать самому.

TweakPNG

Начнем с того, где же может пригодиться данный формат? Конечно, в параллаксе (именно в стандартном параллаксе, а не в параллакс-мапинге. Ночное небо, облака, закат. Так как ЖПЕГ хорош в фотографических изображениях, а для неба прозрачность не нужна, то в теории он нам подойдет. Что же на практике? Для теста взял параллакс голубого небо с облаками из стандартного набора параллаксов VX Ace.

- оригинал PNG 860 kb
- PNG-8 - 39 kb. Отличия от оригиналы сильно видны - отчетливые полосы вместо градиента.
- PNG-24 - 260 kb. Отличий выявить не удалось даже при большом увеличении (не забываем, что в мейкера разрешение небольшое,да и параллакс движется, поэтому в игре наверняка будет еще менее заметно.
- JPEG с качеством около 50-ти - 41 kb. Отличия видны только при максимальном увеличении, при котором виден каждый пиксель.
Таким образом, разница между JPEG и оригиналом практически не видна,зато экономится более 800 kb веса картинки. Учитывая больший вес графики в мв ввиду большего разрешения берем JPEG на заметку. При использовании параллакс-маппинга это поможет существенно снизить вес игры.

Также стоит упомянуть еще одну опцию при нажатии в фотошопе кнопок CTRL+ALT+SHIFT+S ("сохранить как.."). При сохранении метоом сжатия JPEG (а ЖПЕГ формально именно метод сжатия, ведь формат картинок может быть различным), вы увидите слово Progressive. Что оно значит? По названию кажется, что это какая-то характеристика в духе "качества". Однако данное слово обозначает метод загрузки изображения. При выставлении галочки напротив этого параметра картинка будет грузиться сначала в плохом качестве, и только после загрузки хорошего качества она сменится. При отсутствии галочки картинка будет загружаться построчно". Судя по браузерным версиям игр, которые я щупал на форуме, мв грузит изображения другим способом, а потому галочку лучше не выставлять, так как "прогрессивный" метод загрузки добавляет около 10% веса.


На этом пока всё. Возможно, если кому-нибудь нравится не только делать, но и знать "ПОЧЕМУ надо делать так, а не иначе", статью дополню чем-нибудь еще.