Png информация: PNG — not GIF! / Хабр

PNG — not GIF! / Хабр

Доброго времени суток!
Вам когда-нибудь хотелось узнать как устроены файлы PNG? Нет? А я все равно расскажу.
Формат PNG(Portable Network Graphics) был изобретен в 1995 году, чтобы стать заменой GIF, а уже в 1996, с выходом версии 1.0, он был рекомендован W3C, в качестве полноправного сетевого формата. На сегодняшний день PNG является одним из основных форматов веб-графики.

Под катом вы найдете общее описание строения PNG-файла, некоторое количество картинок-схем, препарирование в hex-редакторе, и, конечно, ссылку на спецификацию.

Общее строение

Структура PNG в самом общем виде представлена на следующем рисунке.

То есть файл состоит из подписи и некоторого количества блоков(чанков, chunks), каждый из которых несет в себе некоторую информацию (спасибо КО!). Но почему подпись нельзя считать одним из чанков? Давайте разберемся поподробнее.

Подпись файла

Подпись PNG-файла всегда одинакова, состоит из 8 байт, и представляет собой (в hex-записи)

89 50 4E 47 0D 0A 1A 0A

Что же это означает?

89 — non-ASCII символ. Препятствует распознаванию PNG, как текстового файла, и наоборот.
50 4E 47 — PNG в ASCII записи.
0D 0A — CRLF (Carriage-return, Line-feed), DOS-style перевод строки.
1A — останавливает вывод файла в DOS режиме (end-of-file), чтобы вам не вываливалось многокилобайтное изображение в текстовом виде.
0A — LF, Unix-style перевод строки.

Chunks

Чанки — это блоки данных, из которых состоит файл. Каждый чанк состоит из 4 секций.

Разберем эти секции по порядку.

Длина

Ну, с длиной вроде все ясно. Просто числовое значение длины блока данных.

Тип (имя)

С типом немного поинтересней. Тип представляет собой 4 чувствительных к регистру ASCII-символа. Регистры символов (пятый бит в числовой записи символа) в имени чанка различаются неспроста — это флаги, которые сообщают декодеру некоторую дополнительную информацию.

Регистр первого символа определяет является ли данный чанк критическим(верхний регистр) или вспомогательным(нижний регистр). Критические чанки должны распознаваться каждым декодером. Если декодер встречает критический чанк, тип которого не может распознать, он обязан завершить выполнение с ошибкой.
Регистр второго символа задает «публичность»(верхний регистр) или «приватность»(нижний регистр) чанка. «Публичные» чанки — официальные, задокументированные, распознаваемые большинством декодеров. Но если вдруг вам для каких-то своих нужд понадобится кодировать специфическую информацию, то просто в имени чанка сделайте второй символ маленьким.

Регистр третьего символа оставлен для будущих свершений. Предполагается, что он будет использоваться для дифференциации различных версий стандарта. Для версий 1.0 и 1.1 третий символ должен быть большим. Если он (внезапно!) оказался маленьким, все нынешние декодеры должны поступать с чанком, так же как и с любым другим не распознанным (то есть выходить с ошибкой если чанк критический, или пропускать в противном случае).
Регистр же четвертого символа означает возможность копирования данного чанка редакторами, которые не могут его распознать. Если регистр нижний, чанк может быть скопирован, вне зависимости от степени модификации файла, иначе (верхний регистр) он копируется только в случае, когда при модификации не были затронуты никакие критические чанки.

Для лучшего понимания, давайте разберем флаги на примере чанка, содержащего текст.

Ниже приведен список типов чанков с краткими пояснениями.
Критические чанки

IHDR — заголовок файла, содержит основную информацию о изображении. Обязан быть первым чанком.
PLTE — палитра, список цветов.
IDAT — содержит, собственно, изображение. Рисунок можно разбить на несколько IDAT чанков, для потоковой передачи. В каждом файле должен быть хотя бы один IDAT чанк.
IEND — завершающий чанк, обязан быть последним в файле.

Вспомогательные чанки

bKGD — этот чанк задает основной фоновый цвет.
cHRM используется для задания CIE 1931 цветового пространства.
gAMA — определяет гамму.
hIST — в этом чанке может храниться гистограмма или общее содержание каждого цвета в изображении.
iCCP — цветовой профиль ICC
iTXt — содержит текст в UTF-8, возможно сжатый, с необязательной языковой меткой. iTXt чанк с ключевым словом ‘XML:com.adobe.xmp’ может содержать Extensible Metadata Platform (XMP).
pHYs — содержит предполагаемый размер пикселя и/или отношение сторон изображения.
sBIT (significant bits) — определяет «цветовую точность» (color-accuracy) изображения (черно-белое, полный цвет, черно-белое с прозрачностью и т.д.), для более простого декодирования.
sPLT — предлагает палитру для использования, если полный спектр цветов недоступен.
sRGB — свидетельствует о использовании стандартной sRGB схемы.
sTER — индикатор стереоскопических изображений.
tEXt — может содержать текст в ISO/IEC 8859-1 формате, с одной name=value парой для каждого чанка.
tIME — хранит дату последнего изменения изображения.
tRNS — содержит информацию о прозрачности.
zTXt — сжатый текст, с теми же ограничениям, что и tEXt.

Более подробную информацию можно найти в спецификации.

CRC

Контрольная сумма CRC-32. Кстати на днях был топик о ее подсчете в Windows.

Минимальный PNG

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

IHDR

Блок данных в IHDR содержит следующие поля:

Ширина, 4 байта
Высота, 4 байта
Битовая глубина (bit depth), определяет количество бит на каждый сэмпл(не пиксель), 1 байт
Тип цвета, состоит из 3 флагов 1 (используется палитра), 2 (используется цвет, не монохромное изображение), and 4 (присутствует альфа-канал), 1 байт
Метод сжатия. На данный момент доступно только значение 0 — сжатие по алгоритму deflate. Если значение отлично от 0, чанк считается нераспознанным, и декодер рапортует об ошибке. 1 байт
Метод фильтрации.
Так же, как и в случае сжатия, на данный момент может быть только нулем. 1 байт
Interlace(переплетение) метод. Определяет порядок передачи данных. На данный момент доступно 2 значения: 0 (no interlace) и 1 (Adam7 interlace). 1 байт

Adam7 interlacing прекрасно демонстрирует картинка из википедии (да-да, GIF в статье про PNG):

IEND

Сигнализирует о конце файла, блок данных этого чанка не содержит ничего.

IDAT

Содержит данные, закодированные, в соответствии с полем метода сжатия в заголовке. Алгоритм декодирования выходит за рамки данной статьи (однако если будут желающие, может появиться в следующей), но в довольно хорошо (и по-русски) описан здесь.

Таким образом, простейший PNG-файл (на примере ) выглядит следующим образом.

Заключение

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

Топик на хабре про строение JPEG: habrahabr.ru/blogs/algorithm/102521
Топик на хабре про строение GIF: habrahabr.ru/blogs/algorithm/127083

Спасибо за внимание, буду рад любой критике!

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

HTML и CSSXSLTJavaScriptИзображенияСофтEtc

	Задача.	Научиться работать с 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, мы можем применять их в подготовке изображений для веба. Об этом — в следующих статьях.

Наболело

Grayscale и greyscale — равнозначные варианты. Я использовал последний потому, что он указан в спецификации на W3C.

Ссылки по теме:

http://lingvo.yandex.ru/en?text=grey&st_translate=1
http://www.w3.org/TR/PNG/#3Defsandabbrevs

Формат изображения PNG — история, особенности и преимущества

PNG означает Portable Network Graphics s. PNG — это тип формата изображения, как и другие форматы изображений, такие как JPEG, GIF и TIFF. PNG обычно произносится как P-N-G, тогда как некоторые люди также называют его «ping». PNG используется для сжатия изображений без потерь и представляет собой формат файла растровой графики. PNG поддерживает все истинные цвета и широко используется для передачи изображений во Всемирной паутине. PNG не подходит для печати, так как не поддерживает цветовую схему CMYK. Изображения PNG имеют расширение файла PNG или png.

История и назначение
Версии
Особенности PNG
Преимущества и недостатки формата PNG
Когда использовать PNG
Открытие и редактирование файлов PNG

История и назначение

В 1995 году корпорация Unisys защитила патент на алгоритм Лемпеля Зива Уэлча, что привело к патенту на формат файла GIF для компаний, которые используют эти изображения для получения прибыли.

Другим недостатком формата файла GIF было то, что он мог отображать только 256 цветов, тогда как в то время графическое оборудование, используемое в компьютерах, могло поддерживать большее цветовое разрешение. Принимая во внимание эти недостатки изображений GIF, началась работа над PNG. В 1995 году на обсуждении форматов изображений Оливер Фромм, разработчик известного средства просмотра DOS JPEG QPEG, предложил название для этого нового формата изображений PING .

Версии

До сих пор существовало 5 основных версий PNG. Первая итерация формата файла PNG была выпущена в октябре 1996 года Консорциумом World Wide Web (W3C).

14, 19 октября97 Управление по присвоению номеров в Интернете (IANA) утвердило «image/png», сделав его одним из официальных типов интернет-медиа. Image/png официально присоединился к image/gif и image/jpeg в качестве признанных форматов изображений.

Дальнейший прогресс привел к выпуску версии 1.1 в декабре 1998 г. и версии 1.2 в августе 1999 г. В 2003 г. PNG стал международным стандартом, а в марте 2004 г. была выпущена стандартная версия.

В этой таблице приведены сводные данные о версиях PNG и датах их выпуска.

Версия	Дата выпуска	Важные обновления
1,0	1 октября ^st , 1996	W3C рекомендовал эту версию в тот же день
1. 1	31 декабря 1998 г.	Введение трех новых чанков
1,2	11 августа 1999 г.	Добавлен один дополнительный блок
ИСО/МЭК 15948:2003	10 ноября 2003 г.	PNG стал международным стандартом/фрагмент не добавлен.
ИСО/МЭК 15948:2004	3 марта 2004 г.	Стандартная версия 2004 г.

Особенности PNG

Кроссплатформенная поддержка означает, что файлы PNG правильно отображаются на платформах ПК, Mac, Android и iOS.

PNG поддерживают 24-битные RGB, 32-битные RGBA и цветовые палитры оттенков серого. 24-битный цвет (истинный цвет) поддерживает миллионы цветовых комбинаций. 32-битный RGBA имеет альфа-канал, который позволяет использовать дополнительные цветовые градиенты и прозрачность с массивными цветовыми комбинациями.

Изображения в формате PNG меньше по размеру и загружаются быстрее, чем эквивалентные файлы GIF или RGB TIFF. GIF-файлы с индексированными цветами примерно на 30 % больше, чем файлы PNG с индексированными цветами, в то время как файлы RGB TIFF с истинными цветами в среднем на 40 % больше. PNG также имеют расширенные схемы чересстрочной развертки, что означает, что вы можете предварительно просмотреть файл PNG, загрузив всего 1/64 данных. Для чересстрочных GIF данные изображения, которые необходимо загрузить для предварительного просмотра, по крайней мере в 8 раз медленнее.

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

Преимущества формата PNG

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

Недостатки формата PNG

Изображение PNG обычно больше по размеру по сравнению с традиционным GIFF, потому что это формат изображения без потерь. Однако, если PNG сохраняется с цветовой схемой 256, его размер меньше по сравнению с GIF.
PNG не поддерживает анимацию и подобную графику, и для этой цели используется разновидность формата PNG, MNG (Multiple Network Graphics) и APNG (Animated Portable Network Graphics).

Когда использовать PNG

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

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

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

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

Открытие и редактирование файлов PNG

Изображения в формате PNG можно открывать с помощью нескольких программ, доступных бесплатно и на платной основе. Почти любой редактор изображений или видео может помочь вам открыть изображения PNG. Веб-браузеры и программные приложения, такие как Windows и macOS, также поддерживают файлы PNG.

Используйте любой из браузеров Firefox, Chrome, Opera или Safari, чтобы открывать типы изображений .png. Paint 3D, Adobe PhotoShop и XnView — одни из наиболее часто используемых приложений для открытия файлов PNG.

При желании вы можете преобразовать файл PNG в изображение JPG , BMP или GIF. Откройте изображение файла и «сохраните как», выбрав формат файла, в который вы хотите преобразовать файл.

Вы также можете конвертировать PNG в PDF с помощью конвертера PDF.co.

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

Об авторе

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

Записи