Формат png что это: Файл PNG — что это за формат и основные программы – Формат файла PNG — описание, чем открыть .png

alexxlab
Разное |

Про PNG. Часть первая

Общаясь со своими коллегами на различных семинарах и в студии, я пришел к выводу, что для многих единственным преимуществом формата PNG является наличие честной полупрозрачности. Если поискать в интернете информацию об этом формате, несложно заметить, что веб-разработчики разделились на два лагеря. Первые пишут о том, какой этот формат замечательный, оперируя чисто техническими данными, непонятными обычным кодерам и дизайнерам (к примеру, о превосходстве deflate-алгоритмов сжатия над LZW), другие же оставляют комментарии разной степени глупости о бесполезности PNG, не потрудившись даже вникнуть в суть вещей, описанных в спецификации.

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

Начнем с терминологии. Предполагаю, что большинство читателей пользуются фотошопом и встречали там названия PNG-8 и PNG-24. Это не два разных формата, а всего лишь вариации одного и того же PNG. Формат позволяет хранить три типа изображений: greyscale (для описания изображения используется один канал — белый), indexed-colour (используется палитра цветов, как в GIF) и truecolor (используется три канала — RGB).

Самое главное преимущество формата PNG — это, конечно же, новые алгоритмы сжатия. Все помнят, что GIF эффективно сжимает только горизонтальные одноцветные области? Про это ограничение теперь можно забыть:

GIF, 2568 байт PNG-24, 372 байта

Вторым важным преимуществом является фильтрация строк (scanline filtering, или delta filters), благодаря которой PNG-упаковщик может получить гораздо более удобные данные для сжатия.

Рассмотрим на примере, как они работают. Возьмем изображение 5×5 пикселей с горизонтальным градиентом и схематично отобразим, как оно может быть сохранено в файле (каждое число — уникальный цвет).

Хозяйке на заметку

Считаю своим долгом отметить, что цвет в формате RGB хранится в виде одного числа, а не трех (на каждый канал). Например, цвет R: 253, G: 93, B: 69 хранится как число 16604485 в десятичной системе счисления или как #fd5d45 — в шестнадцатеричной.


Как видно из примера, GIF-кодировщик отдал бы на сжатие строки, которые плохо упаковываются по горизонтали (потому что одинаковые цвета распространяются по вертикали). А вот как может преобразовать эти данные PNG-кодировщик:

Перед каждой строкой появилась цифра 2. Это — фильтр, который был применен к строке. В данном случае это фильтр Up, который говорит декодеру: «Для текущего пикселя возьми значение пикселя выше и прибавь к нему текущее значение». В нашем случае это 0, потому что цвета текущего и верхнего пикселей не отличаются. А эти данные можно эффективней упаковать, если у нас достаточно большое изображение.

Почему я написал может? Потому что в нашем идеализированном случае более эффективной была бы такая схема:

Тут применен фильтр 1 под названием Sub, который говорит декодеру: «Возьми значение пикселя левее текущего и прибавь ему текущее значение». В данном случае 1.

После фильтрации все строки (вместе со значениями фильтров) объединяются в одну последовательность, которая затем сжимается deflate-алгоритмами (их обсуждение выходит за рамки этой статьи).

Хозяйке на заметку

Всего существует 5 фильтров: None (никакой фильтрации), Sub (от текущего значения отнять значение левого пикселя), Up (отнять верхний пиксель), Average (отнять среднее значение левого и верхнего пикселей) и Paeth (подставить значение верхнего, левого или верхнего левого пикселя, назван в честь Алана Паэта).


Проверим работу фильтров:

PNG-24, фильтр None
56084 байта		 PNG-24, фильтр Up
23585 байт

Внимательный читатель может заметить, что фильтры применяются не ко всему файлу целиком, а к строкам. Это значит, что каждая строка может иметь свой фильтр. Получается, что способов фильтрации одного изображения может быть 5высота картинки. В общем-то, задача хорошего кодировщика как раз заключается в том, чтобы подобрать такие значения фильтров, при которых объем файла будет минимальным. К сожалению, фотошоп не всегда хорошо справляется со своей работой, поэтому на помощь приходят различные утилиты вроде OptiPNG и PNGCrush, которые в большое количество проходов подбирают разные способы фильтрации и стратегии сжатия данных, значительно сокращая тем самым объем некоторых сложных изображений. Однако стоит помнить, что эти программы не гарантируют уменьшение объема для каждого файла, они всего лишь пытаются найти оптимальный способ кодирования данных.

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

PNG-24 (фотошоп → truecolor),
8167 байт
 PNG-24 (фотошоп + OptiPNG → greyscale),
6132 байта

Преимущества greyscale над truecolor очевидны: к примеру, белый цвет в первом случае записывается (в десятичной системе счисления) числом 255, а во втором — 16777215.

Теперь, вооружившись знаниями о хранении данных в формате PNG, мы можем применять их в подготовке изображений для веба. Об этом — в следующих статьях.

Формат PNG-8 и PNG-24. В чем различия, какой формат лучше выбрать?

Программа фотошоп позволяет выбирать при сохранении файлов между расширениями PNG-8 или PNG-24. В чём же различие этих двух типов?

Само расширение PNG – это способ более продуктивного сохранения графического изображения в сжатом виде, в отличие от похожего формата GIF. Формат PNG-8 сохраняет прозрачный фон изображения, если таковой есть, но имеет ограничение цветовой палитры в 256 цветов. То есть, при сжатии графического изображения, имеющего более 256-и оттенков, эти оттенки будут индексированы (то есть преобразованы) в цвета, входящие в список разрешённых 256-и цветов.

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

Какой же формат лучше использовать?

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

  1. При вёрстке сайтов. Чем меньше объём веса изображения, тем быстрее оно будет загружаться. Следовательно, для сжатия изображения для web-страницы лучше применять PNG-8 для быстрой прогрузки графики.
  2. При передаче информации графическим путём (например, скриншоты или таблицы). В передаче файлов также важна скорость, и можно пожертвовать красотой изображения. Кроме того, PNG отлично справляется с обработкой больших изображений, как скриншоты.
  3. В остальных случаях, если необходимо сильно сжать размер изображения. В таком случае наиболее сильный эффект достигается при ограниченной палитре изображения.

Формат PNG-24 отлично подойдёт в том случае, если сохранение красоты изображения стоит на первом месте. Это плохо получается в JPG, который имеет привычку забивать изображение бурыми пикселями и в результате портить внешний облик картинки. PNG-24 отлично ладит с абстрактными изображениями наподобие вихря цвета.

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