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 — формат файла. Чем открыть PNG?
Файл формата PNG открывается специальными программами. Чтобы открыть данный формат, скачайте одну из предложенных программ.
Расширение PNG это формат файла, используемый для хранения изображений без потери качества. Это самый популярный формат фотографий в Интернете, специально разработанный для использования в Сети.
Что находится в файлах PNG
Формат PNG имеют как фотографии в оттенках серого, так и полноцветные, поддерживаются прозрачные слои. Сжатие PNG обычно лучше того, которое используется в GIF. JPG иногда имеет больше преимуществ перед PNG, но после такого сжатия могут возникать дефекты в изображениях с текстом или вокруг высококонтрастных областей.
Как открыть файл PNG
Чтобы открыть PNG файлы, можно использовать любой интернет-браузер или графический редактор. И платформа ОС Windows, и Mac OS имеют встроенные механизмы для просмотра таких изображений. Программа Png — Просмотр фотографий Windows по умолчанию часто используется для открытия файлов PNG, поскольку это системная программа Windows. Но существует много других способов их просмотра.
Все браузеры (например, Chrome, Firefox, Internet Explorer и т. д.) будут автоматически просматривать файлы PNG, которые вы открываете в Интернете, а это означает, что не нужно загружать на компьютер каждый PNG файл, который вы хотите посмотреть. Вы также можете использовать браузер для открытия уже имеющихся на компьютере PNG файлов при помощи комбинации клавиш Ctrl + O. Большинство таких программ также поддерживают drag-and-drop, поэтому можно просто перетащить PNG файл в браузер, чтобы открыть его.
Также существует несколько автономных вариантов для открытия таких изображений – это специальные графические редакторы. Несколько популярных — XnView, IrfanView, FastStone Image Viewer, Google Drive,
Конвертация PNG
Файлы изображений можно преобразовывать различными способами, например, конвертировать в png и из него с помощью различных программ и онлайн сервисов. Например, это позволяет делать редактор Png — Фотоконвертер.
Простое введение в особенности формата
Greg Roelofs, <[email protected]> http://pobox.com/~newt
Иван Зенков, <[email protected]>
Dimok Busheff, <[email protected]>
Данный документ предназначен для разъяснения некоторых особенностей формата PNG обычным пользователям, по этому здесь вы не увидите акцентирования внимания на таких вещах как свобода PNG от патентов, поскольку они в первую очередь касаются лишь программистов. Встречающаяся техническая информация призвана объяснить пользователю почему различные приложения не работают так как он от них этого ожидает. В случае тестов с производительностью (особенно в сравнении с другими графическими форматами) предполагается, что используемая реализация находится PNG на уровне лучших реализации freeware-кодеров. Обратите внимание, что в настоящие время возможны проблемы даже при использовании некоторых популярных (и дорогих) графических редакторов.
Вот ещё несколько страниц сторонних авторов, с различными взглядами на PNG:
Примечание:
Прошу вас особенно обратить внимание на то, что весь нижеприведённый текст это по сути перевод A Basic Introduction to PNG Features (ни о каком GFDL здесь и речи быть не может). По ходу дела я буду высказывать своё скромное мнение на счёт PNG в частности и графики вообще (и вот это мнение уже может распространяться под GFDL).
Если найдёте какие-то неточности, устаревшие фрагменты в данном документе или новые особенности и недостатки PNG не описанные здесь, то Greg ждёт от вас писем. Ну, а я в свою очередь жду исправлений, дополнений и так далее, к самому переводу.
Область применения
Формат PNG (Portable Network Graphics) спроектирован для замены устаревшего и более простого формата GIF, а также в некоторой степени для замены значительно более комплексного формата TIFF (см. официальный сайт PNG или хронологическую страницу для дополнительной информации). В данном документе мы сосредоточимся на двух основных направлениях в использовании формата. Первое, использование во всемирной паутине (WWW) и второе, графическое редактирование.
Для вэб PNG действительно имеет три основных преимущества перед GIF: альфа-каналы (переходная прозрачность), гамма-коррекция (межплатформенное управление яркостью изображения), двумерная чересстрочность (метод прогрессивной развёртики). Он обладает превосходным уровнем сжатия по сравнению с GIF, но различия колеблются около 5-25%, что не так уж и много для того, чтобы подвигнуть людей использовать только этот формат. Существует одна особенность GIF которую PNG не пытается воспроизвести, это поддержка множественного изображения, особенно мультипликации, PNG был предназначен лишь для одного изображения. Существует очень схожий с PNG расширенный формат называемый MNG, завершён в середине 1999 года и уже поддерживается в различных приложениях, но MNG и PNG имеют различные расширения и различные цели.
Для редактирования изображения, как профессионального так и не очень, PNG предоставляет отличный формат, даже для хранения промежуточных стадий редактирования. Поскольку сжатие происходит полностью без потерь и поскольку формат поддерживает 48-битный «truecolor» или 16-битный «grayscale«, сохранение, восстановление и пересохранение изображения проходят без потерь в качестве в отличии например от стандартного JPEG (даже с максимально высоким уровнем качества). В отличие от TIFF PNG спецификация не позволяет авторам реализаций привередничать выбирая какие возможности они собираются реализовать; как результат, любое сохранённое PNG изображение в одном приложении, может быть прочитано в любом другом приложении поддерживающим PNG.
За перечислением плюсов PNG, прошу обратить ваше внимание, что часто для обмена целостными «truecolor» изображениями (особенно фотографическими) JPEG — почти всегда лучший выбор. Хотя сжатие JPEG производиться с потерями при которых могут появляться артефакты, их всё же можно минимизировать, а вот размер файла даже на высококачественном уровне значительно меньше, чем в случае с форматами сжатия без потерь, вроде того же PNG. Также например для чёрно-белого изображения, особенно текста или рисунков, сжатие TIFF Group 4 или формат JBIG часто значительно лучше подходит, чем 1-битный «greyscale» PNG.
Примечание:
В последнем случае я с автором всё таки не согласен. Да действительно часто предпочтительней использовать JPEG, особенно для фотографий. Но это лишь в том случае, когда изображение не имеет для вас первичного приоритета, то есть второстепенно. Отправляя же например свою фотографию девушке, я бы не рискнул сохранить её в JPEG. Не говоря уже о таких случаях, когда я девушке отправляю не свою фотографию, а изображение своего рабочего стола. В последнем случае все эти артефакты всё равно проявятся и испортят общее впечатление от моих огромных SVG иконок. В случае же с чёрно-белыми изображениями из выше перечисленного я бы вообще ничего использовать не стал. По мне дак, для таких задач (а подразумевались отсканированная документация) я бы вообще использовал замечательный формат DjVu, о котором уже как-то писал.
Сжатие
PNG обладает лучшим уровнем сжатия без потери информации и без патентных отчислений, но к сожалению далеко не все реализации полностью используют доступные возможности и даже те которые таковые возможности используют, могут быть неправильно применены.
PNG поддерживает три основных типа изображения, это: «truecolor«, «grayscale» и индексированное на основе палитры (8-битный). JPEG поддерживает только два первых, а GIF лишь третий (хотя при использовании серой палитры может фальсифицироваться и «grayscale«). Плотность сжатия происходит из способности смешивать различные типы изображения в одном PNG файле. Заставляя приложение сохранить 8-битное изображение как 24-битный «truecolor» (или RGB), в результате вы не получите маленького файла. Это может быть неизбежно в случае когда оригинал был изменён с добавлением более 256 цветов (например если в качестве фона был добавлен сплошной градиент), но многие изображения преднозначеные для сети, состоят из 256 цветов, а иногда и всего из нескольких (например из десяти).
Основная ошибка, это включение слишком большого количества данных палитры в PNG изображение. Эта ошибка наиболее заметна при конвертировании небольших GIF изображений (маркеров, кнопок и др.) в формат PNG. Эти изображения занимают в среднем 1000 байт и содержат 256 вводных в палитру данных из которых необходимы лишь 50, что приводит более чем к 600 байтам потраченного впустую пространства.
Примечание:
Имеется введу сохранение индексированного изображения в RGB, RGBA или просто с лишними данными в палитре, то есть лишними цветами.
Другая ошибка, использовать один тип фильтра сжатия или его неправильную подборку. Фильтры сжатия будут описаны ниже, с их помощью можно добиться поразительного различия в уровне сжатия изображения. Хотя на самом деле это не та особенность с которой должен экспериментировать пользователь.
Под конец ещё несколько слов о сжатии. Механизм сжатия может быть установлен на быстрый или качественный уровень. Часто «качественное сжатие» предпочтительнее, но иногда может быть выбран промежуточный уровень, например для повышения интерактивной производительности. Обычно (независимо от настроек) различия в размере файлов минимальны, но порой они бывают просто огромны.
Примечание:
Обратите внимание, что какой бы уровень сжатия вы не выбрали, качество изображения абсолютно не изменится измениться лишь время его загрузки.
Для дополнительной информации относительно механизма сжатия PNG и алгоритма CRC-32 посетите официальный сайт zlib. Для альтернативной реализации алгоритма сжатия посетите официальный сайт 7-Zip и почитайте «Введение в компрессию» для описания сжатия вообще. Для инструментария оптимизации и сжатия PNG изображений, посетите страницу со списком конвертеров (особое внимание обратите на pngcrush и SmartSaver).
Примечание:
Автор не упомянул наверное одну из лучших программ в своём роде, называется она OptiPNG (542KB) и доступна «as-is» под несколько операционных систем (существует ещё версия OptiPNG Plus, но у неё с «public-domain» проблемы).
Лучшей OptiPNG я посчитал из-за простоты использования хотя бы по сравнению с тем же pngcrush, о котором упоминалось выше.
Итак, за собственно сам уровень сжатия в OptiPNG отвечают следующие ключики:
- -i: тип чересстрочности (0-1)
- -zc: уровни сжатия zlib (1-9), по умолчанию 9
- -zm: уровни памяти zlib (1-9), по умолчанию 8
- -zs: стратегии сжатия zlib (0-2)
- -f: дельта-фильтры PNG (0-5)
Справку по остальным ключам программы можно получить набрав optipng —help, впрочем нам они всё равно не понадобиться, как не понадобятся и выше перечисленные ключики. Разработчик OptiPNG позаботился о пользователях, снабдив программу специальным ключом оптимизации -o (0-7), по умолчанию 2. По сути ключ -o это определённая комбинация из вышеперечисленных ключей. Так -o2 будет -zc9 -zm8 -zs0-2 -f0,5, а -o3 будет -zc9 -zm8-9 -zs0-2 -f0,5, самым же эффективным является -o7 тест с которым я и покажу.
Для теста было выбрано олигархическое полотно замечательного художника Владимира Куша, предварительно обработанное GIMP’ом (стабильная версия 1.2) и сохранённое в RGBA как PNG с отключёнными параметрами и степенью сжатия 9. В результате было получено изображение в 135168 байт, если верить моему кривому du. Сжатие производилось OptiPNG версии 0.4.3, осуществлялось командой optipng -k -o7, ключ -k нужен, чтобы при оптимизации не был удалён оригинальный файл. В результате файл с оптимизированным изображением весил 118784 байт полагаясь на тот же du.
Как видите, оптимизация налицо, и всё это без каких-нибудь потерь в качестве (да в случае с PNG их и не могло быть). Так первое изображение (слева) это оригинал сохранённый в GIMP‘е (помните максимальный уровень сжатия?), второе — оптимизированный вариант.
«Чудо» — скажете вы и будете в корне неправы, ведь чудеса если и бывают, то явно не в данном случае. Нет это действительно было не чудо, это была ещё одна распространённая ошибка. Некоторые люди создавая новое изображение в GIMP‘е (да и других редакторах) выбирают прозрачный фон в качестве заливки (в диалоге «Новое изображение» GIMP‘а даже раздел «Тип заливки» имеется), и, почему-то, им кажется, что раз прозрачный, то и на размере это не отразиться. Разумеется, на размере это отражается, и отражается в большую сторону, поскольку добавляется альфа-канал (помните, что изображение я сохранил в RGBA?). OptiPNG, как программа умная, всё это замечает и удаляет, предоставляя нашему вниманию нормальное изображение. GIMP за сим же процессом ещё при сохранении не следит полагаясь на благоразумность пользователя. Бороться с ошибкой можно выбирая в качестве заливки какой-нибудь цвет ещё при создании изображения (в GIMP‘е начиная с версии 1.3, можно вообще на задавать заливку, получив весьма странный нулевой фон). А OptiPNG действительно замечательная программка, она позволяет избавить PNG файл не только от программных ошибок, но и от людских тоже. Советую, особенно для оптимизации больших коллекций, Бог знает кем и как созданных изображений.
Фильтры сжатия
Фильтры сжатия — способ преобразования графических данных (разумеется без потерь) для улучшения уровня сжатия. Каждая горизонтальная линия в изображении может иметь один из пяти типов фильтров. Выбор какой именно фильтр из пяти использовать для каждой строки, это скорей больше чёрная магия, чем наука. Однако, по крайней мере один действительно хороший алгоритм не только известен, но даже описан в спецификации PNG и реализован в свободно доступном программном обеспечении. Вероятно найдутся алгоритмы которые будут работать ещё лучше, но пока это не было центральной областью исследований.
Посредством примера (по общему признанию критический и нереалистичный случай), 512 x 32,768 изображение содержит все 16,777,216 возможные в 24-бита цвета, сжимается более чем в 300 раз лучше с фильтрацией, чем без. Несжатое изображение весило 48MB, сжатое, но без фильтров 36MB, а версия с фильтрами всего 115,989 байт (0.1 MB). Более того, Paul Schmidt создал 4096 x 4096 версию размером 59,852 байт, с общим коэффициентом сжатия 841:1, что более чем в 600 раз лучше версии без фильтров. Ted Samuels пропустил всё это через утилиту Ken‘а Silverman‘а PNGOUT (ссылки на другие конвертеры ищите на специальной странице) и урезал до 57,549 байт, добившись тем самым коэффициента в 875:1 (см. эту страницу для загрузочной версии и дополнительной информации).
Более реалистичный пример с океанографическими данными NASA на сайте Ocean ESIP. Цифровые карты отображающие различные физические измерения, могут быть динамически сгенерированы в GIF или PNG. PNG версии неизменно равны одной-пятой версии GIF, благодаря фильтрам сжатия. Для примера, карта показывающая высоту поверхности северо-восточного Тихого океана 1 Августа 1997 года (во время El Niño) занимает 70,090 байт в GIF, и всего 13,880 байт в PNG (см. главу Алгоритмы фильтров из PNG спецификации).
Как измерение, всё это просто кажется нереалистичным, однако заметьте, что эти, с виду гиперсжатые, PNG могут самостоятельно быть сжаты с дополнительным коэффициентом где-нибудь приблизительно от 21 до 97 (в зависимости от изображения) простым применением gzip. Конечно, gzip PNG не так ужасно полезны в большинстве случаев, а вот MNG хорош для всего, сокращая размер на 456 байт.
Альфа-каналы
Также известный как маска-канал, альфа-канал это просто способ объединить переходную прозрачность с изображением. Принимая во внимание, что GIF поддерживает простую бинарную прозрачность (это когда любой пиксель может быть либо полностью прозрачным, либо абсолютно непрозрачным), PNG позволяет 254 уровня частичной прозрачности между нормальным изображением (или 65,534 уровня прозрачности для специальных «очень безумных» форматов, но здесь мы больше концентрируемся на изображениях, используемых в интернете).
Все три типа PNG изображений («truecolor«, «grayscale» и индексированная палитра) могут содержать альфа-информацию, хотя обычно она применяется лишь с «truecolor» изображениями. Вместо того, чтобы сохранять три байта для каждого пикселя (красный, зелёный и синий), сохраняются четыре: красный, зелёный, синий и альфа, таким образом получается RGBA. Вся эта переходная прозрачность позволяет вам создавать замечательные «спецэффекты», хорошо выглядящие на любом фоне. Например эффекта фотовиньетки, для портрета, можно добиться путём установки полностью непрозрачной центральной области (то есть для лица и плеч), прозрачной остальной обстановки и с созданием плавного перехода между двумя этими различными областями. Рассматривая изображение в браузере типа Arena, портрет будет плавно осветляться на белом фоне, и затемняться на чёрном. Ещё один идеальный спецэффект с альфа-прозрачностью, это отбрасывание тени. Так на изображениях ниже показан тукан, в первом случае отбрасывающий тень на красочный фон, во втором на свою копию.
Эта особенность с прозрачность наиболее важна для маленьких изображений, обычно используемых на вэб-страницах, вроде цветных (круглых) маркеров или причудливого текста.
Альфа-смешивание позволяет использовать другой эффект, а именно сглаживание (anti-aliasing) создавая иллюзию гладких кривых на сетке прямоугольных пикселей плавно изменяя их цвета, что позволяет добиться округлых и кривых изображений, хорошо отображаемых как на белом (к примеру), так и на любом другом фоне. Таким образом одно и тоже изображение может быть многократно использовано в нескольких местах без «призрачного» эффекта, свойственного GIF изображениям.
Примечание:
Я не очень-то понял, в чём заключается этот «призрачный эффект». Было несколько вариантов, среди которых наибольшую проблему в GIF у меня вызывали изображения созданные для одного фона, но наложенные на другой, приблизительно так же, как я сделал со знаменитым зверьком O’Reilly Network, только ещё хуже.
Конечно эффективная замена GIF-кнопкам и иконкам должна быть сравнима по размеру, и часто приходится исключать «truecolor» RGBA изображения. Впрочем точно также PNG поддерживает альфа-информацию и в случае с индексированными изображениями, просто это намного труднее осуществить. Изображение в PNG с альфа-индексацией — это изображение, чья палитра обладает альфа-информацией, связанной с ней, а не индексированное изображение с полной альфа-маской. Другими словами каждый пиксель соответствует данным из палитры с красными, зелёными, синими и альфа компонентами. Так, если вы хотите получить яркие красные пиксели с четырьмя различными уровнями прозрачности, вам потребуется использовать четыре отдельных ячейки в палитре, чтобы их индексировать (все четыре ячейки обладают идентичными RGB компонентами, но альфа значения различаются). Если вы хотите чтобы все ваши цвета имели четыре уровня прозрачности, вам проще сократить общее количество доступных цветов с 256, до 64. В основном только некоторые цвета нуждаются более чем в одном уровне прозрачности, и выяснение какие именно, процесс требующий определённой мудрости. Можно взглянуть на программу pngquant, которая конвертирует 32-битные RGBA PNG в 8-битные изображения с RGBA-палитрой. Для программистов доступен исходный код программы.
Для более лучшего объяснения с красивыми примерами, смотрите главу «Прозрачность и сглаживание» замечательной WWW4 статьи Chris‘а Lilley‘я Не просто декорация: Качественная графика для вэб.
Примечание:
К стати, поразительная вещь, но GIMP, кажется, об этом не в курсе. Сколько раз я не пытался сохранить в нём прозрачное индексированное PNG изображение, мои попытки оканчивались неудачей. То есть RGBA пожалуйста, «grayscale» на здоровье, а вот чтоб индексированное с прозрачностью, ни в какую. Что же всё таки делать, если понадобилось небольшое прозрачное изображение? Ну, выход, как всегда, есть, и о нём уже говорилось выше, нужно просто использовать pngquant (24KB).
В начале я создал обычное RGBA изображение, взяв за основу уже индексированную когда-то картинку (не очень сильно) с персонажем замечательной игры DROD. Затем командой pngquant 64 rgba.png получил нужное мне индексированное изображение с прозрачностью. Там где 64, я установил количество необходимых мне цветов, а rgba.png это файл первого изображения. Думаю несложно догадаться, что первое изображение это и есть мой первоначальный вариант (весил он 12288 байт), а второе это индексированный вариант с прозрачностью (занимал всего 8192 байт).
Индексированное подобным образом изображение, успешно отобразили GQview (не создав иконки в предварительном просмотре), Opera и Mozilla. Проблемы были разумеется с GIMP‘ом (версии 1.2, 1.3) и Konqueror’ом (версии 3.1.4).
Впрочем, несмотря на все минусы, единственным способом уменьшить размер PNG файла, помимо сжатия, остаётся индексирование. А в случае когда с индексированием необходим ещё и альфа-канал, pngquant становиться практические незаменимым инструментом. И очень жаль, что свободное ПО таких масштабов как GIMP не знает всех возможностей формата PNG, да ещё и при том, что исходники того же pngquant доступны «as-is«.
Гамма-коррекция
Гамма-коррекция существует для исправления различий того, как компьютеры (а особенно мониторы) интерпретируют цветовые значения. Вэб-дизайнеры, вероятно, знают случаи, когда созданные на Macintosh изображения выглядят слишком тёмными на PC, или созданные на PС выглядят слишком светлыми на Mac‘ах. Изображение, которое хорошо смотрится на SGI Workstation, не хочет отображаться на Macintosh или PC. Изображение созданное на одном PC неверно отображается на всех остальных.
Гамма-информация — частичное решение. Это способ связи некоего числа с компьютерной системой отображения, в попытке характеризовать хитрую физику, скрывающуюся в пределах цифро-аналогового конвертера графической карты (RAMDAC) и в высоковольтной электронной пушке монитора.
Параметр гамма — это только приближение к действительности. Лучшей аппроксимацией является использование так называемых значений цветности (chromaticity values — также поддерживаемых в PNG), в качестве той же гаммы, но даже это лишь приближение. Самое лучше решение, доступное на данный момент, это использование системы управления цветом (которая опять же поддерживается PNG через расширение фрагментом sRGB). Стоит, однако, сказать, что для большинства людей достаточно лишь установить гамму изображения и настроить гамму системного монитора.
Для дополнительной информации смотрите руководства Chris‘а Lilley: гамма, цветность и управление цветом, или почитайте «Гамма-руководство» в дополнении к спецификации PNG. Для более детальной технической информации смотрите «FAQ: Гамма и цвет» Charles‘а Poynton‘а, официальный сайт Интернационального Цветового Консорциума, домашнюю страницу sRGB или главу «Гамма-коррекция» в статье Chris‘а Lilley Не просто декорация: Качественная графика для вэб.
Чересстрочность
Чересстрочность или прогрессивная развёртка, была известна на протяжении долгого времени. GIF стал поддерживать её с 1989-го, TIFF приблизительно в тоже время (хотя не стандартизированным путём), JPEG с начала 90-ых (хотя это не было широко распространено до 1996-го). Метод чересстрочности PNG концептуально схож с GIF и визуально подобен прогрессивному JPEG (то есть, двухмерен).
Вот GIF анимация (автор Willem van Schaik), показывающая преимущества двухмерной чересстрочной схемы PNG, по сравнению с одномерной версией GIF.
Первое, на что следует обратить внимание, так это на то, что пока видна приблизительно одна восьмая изображения в GIF, PNG изображение уже становиться видимым сразу же после выполнения первого прохода. Первый проход PNG это только 1/64-ая часть данных изображения. Первый проход GIF 1/8-ая. К тому времени, когда первый проход GIF завершился, уже были отображены четыре прохода PNG, и в отличие от GIF-пикселей, растянутых с коэффициентом 8:1, пиксели PNG были растянуты лишь на 2:1. Более того, на самом деле в нечётных проходах никакого растяжения нет вообще и только чётные растягиваются вертикально на 2:1. Это означает, что, например, внедрённый в изображение текст будет доступен для чтения в два раза быстрее, в PNG изображении.
Смотрите чересстрочную демонстрацию PNG для «увеличенного» взгляда на то, как PNG отображает чересстрочные пиксели, или читайте главу «Представление данных» из PNG спецификации для деталей относительно чересстрочной схемы формата PNG.
Проверка целостности файла
PNG поддерживает три основных типа проверки целостности, для помощи программам в работе с файлами. Первый и самый простой — 8-байтная магическая сигнатура в начале любого PNG изображения. Позволяет обнаружить наиболее основное повреждение файла — передачу бинарного файла в текстовом (или ASCII) режиме. На большинстве систем, окончание строки в текстовых файлах отмечается символом возврата каретки (CR), символом перевода строки (LF), либо и тем и другим сразу. Macintosh используют CR, UNIX системы используют LF, все остальные не UNIX системы на PC (DOS, Windows 3.x/95/NT, OS/2) используют CR/LF. Магическая сигнатура PNG грамотно включает как CR/LF, так и LF. Так, для теста передадим в текстовом режиме изображение, на DOS-машину, к LF будет добавлен CR. На UNIX-системах, CR/LF будут преобразованы в обычный LF. На Macintosh и CR/LF, и LF будут преобразованы в CR. Для того, чтобы узнать произошло ли текстовое искажение, достаточно взглянуть на первые восемь, девять байт файла (команда file в UNIX спроектирована специально для таких вещей). Имейте введу, что проблема не в испорченной сигнатуре, реальная проблема состоит в том, что символы CR и LF в данных изображения могут быть опознаны не как конец строки или текст, а как значения пикселей или более абстрактные лексемы компрессора, и все эти символы будут также преобразованы, таким образом разрушая изображение.
Второй тип проверки целостности известен как 32-разрядный циклический контроль избыточности или CRC-32. PNG изображение делится на логические кусочки данных и с каждым кусочком связываются CRC-данные. Если хотя бы один бит в кусочке будет изменён, значение повреждённых данных перестанет соответствовать сохранённым CRC-данным оригинального кусочка. Подобные вещи легко можно проверить не декодируя изображение, фактически это может быть проверено на лету во время загрузки, если программное обеспечение достаточно грамотно для подобных действий.
Третий тип проверки целостности применим лишь к кусочку/кусочкам данных изображения и схож с CRC-значениями. Так где CRC-значения кусочков изображения обращается к фильтрованным, сжатым данным в кусочке, контрольная сумма Adler-32 обращается к завершённому потоку распакованных данных (независимо от того, сколько кусочков изображения могли быть охвачены). В действительности это используется лишь в библиотеках сжатия самого нижнего уровня как средство проверки плохо кодирующего/декодирующего программного обеспечения.
Для более подробной информации смотрите главу «Структура файла» из спецификации PNG.
Произношение
Нет второстепенных вопросов для авторов почти совершенного формата! Да, действительно, даже акроним и произношение были главными темами обсуждения. Причина этому конечно GIF. Кто-то произносит с мягким «G», как «джемпер», кто-то с жёстким, как «гараж» и никто в действительности не знает почему. Но, чтоб вы знали в данном случае правильным будет мягкое «G», поскольку так говорят сами авторы.
PNG всегда пишется по буквам «PNG» (или Portable Network Graphics) и произносится как «пинг», а не «пинджи» или «пэ эн гэ» (впрочем вполне нормально, что люди не говорящие на английском произносят PNG по буквам).
Для более чётких инструкций относительно данного вопроса, смотрите введение в PNG спецификации.
Примечание:
Под конец пара слов относительно использования данного формата в вэб, а точнее относительно связанных с этим проблем. Первая из них, и о ней уже много говорили, это патент на LZW (замечательный алгоритм сжатия применяющийся в GIF, не хочу сказать лишнего, но мне кажется, что он сжимает лучше, чем все эти zlib, используемые в PNG) принадлежащий Unisys. Хорошая новость в том, что патент на территории США истёк 20 Июня, 2003 года. Плохая в том, что он всё ещё действует на территории таких стран как Италия, Франция, Канада, Германия, Англия и Япония. Понятно, что Россия всегда в стороне от подобных вопросов, и каждый что-то решает для себя.
Удивительно то, что альтернатива-то в лице PNG, да и не альтернатива даже, а нечто большее, уже существует давно. То есть действительно PNG большее, ведь он используется во всех современных desktop-системах, его альфа-прозрачность это просто праздник какой-то и для рабочих столов, и для интернета. Здесь другая проблема, Internet Explorer его не поддерживает, точней не поддерживает прозрачность. С этим есть несколько способов борьбы, в определённой мере они действенны. Вообще в подобные вопросы я бы даже вникать не стал. То, что Microsoft не поддерживает формат, проблемы Microsoft, а не формата.
Огорчает не только Microsoft (и я об этом уже говорил), огорчает свободное программное обеспечение. Все эти странные проблемы с тем же Konqueror‘ом… Я уже не говорю о GIMP‘е. Не говорю хотя бы потому, что не использовал все эти новые версии 2.0. Просто надеюсь, там всё исправили.
Copyright 2004, Иван Зенков
Данный документ (кроме отдельно указанных частей, переводного текста и др.) распространяется в соответствии с GNU Free Documentation License опубликованной Free Software Foundation и изготовлен в полном соответствии со стандартами w3 консорциума.
Все торговые марки, названия и логотипы использованные или упомянутые в этом документе, принадлежат своим владельцам.
Остальные мои статьи можно найти на моей страничке на сайте Rus-Linux.net
Если вам понравилась статья, поделитесь ею с друзьями:
Скачать Мир PNG фото изображения и клипарт
Мир — это планета Земля и все живущие на ней, вместе с человеческой цивилизацией. В самом философском контексте «мир» — это вся физическая Вселенная или мир метафизики ассоциированной степени («мир» индивида ассоциированной степени). В самом системном контексте земной шар — это материальная или мирская сфера, а также враждебная небесная, духовная, трансцендентная или священная сферы.Возможности « конца света » совпадают с вершиной человеческой истории, обычно в несекулярных контекстах. История земного шара обычно понимается как охватывающая основные правительственные разработки на протяжении примерно 5 тысячелетий, от первичных цивилизаций до нынешних. В таких терминах, как мировая вера, мировой язык, мировое правительство и война, термин «мир» предполагает глобальный или межконтинентальный масштаб, но по сути не подразумевает участие каждой части земного шара.
Население мира — это добавление всех человеческих популяций в любое время; в равной степени глобальная экономика — это совокупность экономик всех обществ или стран, особенно в контексте глобализации.Такие термины, как «чемпионат мира», «валовой мировой продукт» и «мировые флаги» подразумевают добавление или сочетание всех суверенных государств.
В этой категории вы можете бесплатно скачать PNG картинки: Мир. В этой категории «мир» у нас есть 20 бесплатных изображений PNG с прозрачным фоном.
-
Building Png
Формат: PNG
Разрешение: 821×496
Размер: 756.5KB
Скачиваний: 7248 -
Эйфелева башня Png Изображение
Формат: PNG
Разрешение: 275×435
Размер: 120.2KB
Загрузок: 6,729 -
Земля Png Pic
Формат: PNG
Разрешение: 1107×1107
Размер: 1,6 МБ
Загрузок: 6,440 -
City Building Png
Формат: PNG
Разрешение: 2284×622
Размер: 2.4MB
Скачиваний: 6,045 -
Тадж-Махал Прозрачный
Формат: PNG
Разрешение: 422×290
Размер: 202.8KB
Загрузок: 5,931 -
Город Прозрачная картинка
Формат: PNG
Разрешение: 900×300
Размер: 5.0KB
Скачиваний: 5,455 -
Офисное здание Png
Формат: PNG
Разрешение: 990×459
Размер: 651.4KB
Загрузок: 3,578 -
Земля Скачать бесплатно Png
Формат: PNG
Разрешение: 350×351
Размер: 246.6KB
Скачиваний: 3442 -
Замок Прозрачный
Формат: PNG
Разрешение: 1024×819
Размер: 1.0MB
Загрузок: 3,200 -
Статуя Свободы Скачать бесплатно Png
Формат: PNG
Разрешение: 900×2589
Размер: 2.1MB
Скачиваний: 3138 -
Глобус Скачать бесплатно Png
Формат: PNG
Разрешение: 1024×1024
Размер: 1.4MB
Загрузок: 2,987 -
Тадж-Махал Png Clipart
Формат: PNG
Разрешение: 465×170
Размер: 104.8KB
Скачиваний: 2827 -
Castle Picture
Формат: PNG
Разрешение: 1024×923
Размер: 955.6KB
Загрузок: 2,800 -
Земля Png
Формат: PNG
Разрешение: 800×790
Размер: 978.6KB
Скачиваний: 2728 -
Многоквартирный дом Png
Формат: PNG
Разрешение: 681×1203
Размер: 1.1MB
Скачиваний: 2636 -
Эйфелева башня Png Pic
Формат: PNG
Разрешение: 857×1182
Размер: 770.8KB
Загрузок: 2,598 -
Castle Png Images
Формат: PNG
Разрешение: 1024×1280
Размер: 1.2MB
Скачиваний: 2504 -
Тадж-Махал Png Изображение
Формат: PNG
Разрешение: 930×1000
Размер: 957.0KB
Скачиваний: 2,432 -
Тадж-Махал Скачать бесплатно Png
Формат: PNG
Разрешение: 600×288
Размер: 277.4KB
Скачиваний: 2393 -
Земля Png файл
Формат: PNG
Разрешение: 1000×999
Размер: 1.5MB
Загрузок: 2,352
бесплатных прозрачных изображений PNG, неограниченная загрузка
бесплатных прозрачных изображений PNG, неограниченная загрузка — PNGkeyИзучите прозрачные PNG
PNG кинотеатр
2048 * 1080
177
123
Ангел крылья ангела фото — крылья ангела PNG
630 * 630
87
104
Логотип Rccg — Выкупленный логотип христианской церкви
2300 * 2300
156
104
Логотип Gofood PNG — логотип Go Food вектор
634 * 632
170
99
PNG красный круг — красный круг Png
510 * 510
146
91
Огнестрельное оружие Пистолет PNG изображения
900 * 720
143
89
Иконки электронной почты белого цвета — Белый значок электронной почты Png
640 * 480
118
88
Polaroids On The Hunt — прозрачный оверлейный шаблон поляроид
419 * 454
118
81 год
Последние фоны Cb последние фоны Cb — волосы PNG HD мальчик
590 * 401
193
80
PNG золотой конфетти
1503 * 1005
133
78
Блики Объективов Прозрачный Клипарт Свет Блики Объективов — Синий Блик PNG
900 * 520
113
77
Баба Сахеб Амбедкар Png Фото Изображение Pics — Dr.Бхимрао Амбедкар Ки Дживни
1231 * 1519
168
76
Мазок кистью PNG изображения
900 * 520
141
76
Набор иконок социальных сетей — Facebook Instagram WhatsApp Png
640 * 640
122
75
Шаблон 006 — Instagram Фото Шаблон Png
728 * 1149
181
75
Логотип NSS — логотип национальной схемы обслуживания Png
509 * 510
133
74
5abd317a5ba2f16273094607 Png 564674 пикселей Д — Кадр Kodak Portra 400
564 * 674
152
73
Голубой дым PNG
500 * 500
120
73
PNG PolaroidPng
Поляроид PNG изображения646 * 1019
126
72
PNG сигаретный дым
268 * 800
121
71
Наруто Волосы PNG — Наруто Узумаки Наруто Шиппуден
482 * 330
128
69
PNG прическа PNG изображения
2243 * 2151
140
68
Логотип — Instagram Png Icon Putih
360 * 360
97
68
Треугольник синий светящийся свет форма круто — неон Png для Picsart
1024 * 1024
130
68
PNG разорванная газета
1600 * 1089
103
67
Облака — Реалистичные Облака Png
2194 * 1317
100
67
PNG молочное молоко
1339 * 974
104
66
Раскраски Реалистичные Драконы — Взрослые Раскраски Дракон
1688 * 1136
176
66
Фактический размер шаблона Polaroid
480 * 480
97
66
Круг с логотипом Instagram
920 * 920
98
66
Pubg Lvl 3 Helmet Png Clip Art Черно-белое изображение — Шлем 3 уровня Pubg Vector
1024 * 1024
116
65
H804 Цветочная рамка, Цветочное искусство, Акварельные цветы, — Винтажные цветочные свадебные приглашения фона
4057 * 5150
144
65
PNG прозрачное стекло
1500 * 612
110
64
Как добавить мобильную рамку в видео значок смартфона PNG — Мобильная рамка PNG прозрачный
393 * 373
107
64
Логотип Free Fire Battlegrounds на ПК, логотип Free Fire PNG
625 * 241
115
64
Фон рамки PNG клипарт границы и рамки клип — золотой сертификат границы PNG
899 * 559
123
63
Акварель Instagram Icon Png — Instagram Logo White On Black
1500 * 1500
110
63
Санта шляпа PNG — шляпа Санта прозрачный
400 * 303
105
63
Clique Para Baixar — Imagens Da Ursinha Princesa Em Png
1400 * 1400
170
63
PNG дерево план PNG изображения
1024 * 1024
105
63
Instagram новый логотип PNG изображения без лицензионных платежей, прозрачный фон Instagram белый PNG
1000 * 1000
99
62
Фото — Мем Яранаика
530 * 528
97
62
Логотип Twitter на прозрачном фоне — логотип Twitter PNG
2267 * 2267
136
61
Instagram Png Instagram Png Logo 1455 — Черно-белый логотип Insta
1455 * 1454
98
60
Lol Center Stage Glitter — Центральная сцена Lol Doll
600 * 600
105
60
Джокер Лицо PNG Библиотека бесплатного использования — Макияж Джокера PNG
419 * 500
107
59
Picsart Background, Hd Background Download, Background — Hair Background Мальчик
768 * 610
137
59
Скины Майнкрафт Клипарт Майнкрафт — Скин Майнкрафт Галактический Мальчик
900 * 450
142
58
PNG прическа, фоновое изображение, прическа, прическа PNG Cb
4167 * 2003
130
58
Белый круг Facebook — логотип Facebook Noir Et Blanc Rond
2827 * 2539
90
58
Фоновые изображения, фоновые изображения, фото — волосы PNG для Picsart
3125 * 2402
161
57
Corazones And Png Image — Сердце Emoji Meme Transparent
750 * 750
113
57
Дым PNG изображения скачать бесплатно изображение дым PNG изображения
1920 * 1080
104
57
Виртуальные туры Facebook Twitter Linkedin Pinterest Instagram — значок телефона вектор белый
594 * 594
76
57
Кнопка подписки PNG изображения на прозрачном фоне — подписаться PNG логотип
900 * 900
122
56
PNG дымовой туман
400 * 400
96
56
Деньги Падение — Деньги Падают Прозрачный Фон
1500 * 812
105
56
Значок Apple Music — Примечание с логотипом Apple Music
434 * 434
90
55
Граница изображения, границы для бумаги, границы и рамки, — Золотая рамка PNG
5317 * 8000
103
54
Тропический лист PNG клипарт пальмовых деревьев лист картинки — Тропический пальмовый лист PNG
900 * 900
95
54
изображений в формате PNG, Стоковые Фотографии и Роялти-Фри Изображения в формате PNG изображения
изображений в формате PNG | Depositphotos®Бамбуковые листьяСчастливое летнее солнцеДень Святого Валентина граница красных сердечекКрасивая сексуальная женщина с ярким макияжем смотрит четыре анимированных изображения солнцаЧувственная женщина позирует в студииКарта ВайомингаЗолотое боке на черном фоне, гирлянды размыты праздничный абстрактный фон Карта Северной КаролиныКарта Южной ДакотыЗолотое боке на черном фоне, размытые огни гирлянды праздничный абстрактный фонКарта ОклахомыКарта ИллинойсаКарта ВермонтаКарта ВирджинииКарта Нью-ЙоркаКарта МиннесотыФотографии падающего снега.Снег на черном фоне. Съемка падающего снега. Снег на черном фоне. Крупным планомКарта Западной ВирджинииКарта ИндианыКарта ТехасаКарта АризоныКарта АйовыКарта Южной КаролиныИллюстрации кошек на сайте. Картина с двумя кошками. Две кошки на белом фоне. Кошки. Отпечатки кошачьей лапы. Кошачьи отпечатки. Котята. Иллюстрация кошек. Красочные листья для сбора. Ручной эскиз с лепестками и букетами ромашек. Фото розовых лепестков цветов. Фото розовых лепестковых цветов. Фотосъемка падающего снега. Снег на черном фоне.Крупным планом Фото розовых цветов с лепестками Фото розовых цветов с розовыми лепестками Набор из 13 простых редактируемых значков, таких как Пейзаж, Открытый конверт, YouTube, Внешний жесткий диск, Загрузка в облако, Клип, Нажмите кнопку воспроизведения, Отменить стрелку, Наблюдать за темными глазами на черном Фон Набор из 13 простых редактируемых значков, таких как Пейзаж, Открытый конверт, YouTube, Внешний жесткий диск, Загрузка в облако, Клип, Нажмите кнопку воспроизведения, Стрелку отмены, Наблюдение за темным глазом, Пакет значков веб-интерфейса MapGeorgia MapNew Джерси MapWisconsin MapMissouri MapWashington MapKentucky MapColorado MapUtah MapArkansas MapFlorida MapAlabama MapConnecticut MapDelaware MapAlaska MapHawaii MapOhio MapNew Мексика MapCalifornia MapNebraska MapNevada MapTennessee MapMaine MapMaryland MapMichigan MapKansas MapNorth Дакота MapOregon MapLouisiana MapIdaho MapMontana MapMassachusetts MapPennsylvania MapDaredevils на небоскреб шпиля в Китае
| ||||||
Nous devons vous demander vos preférences… mais nous ne pouvons pas! La législation nous навязывать de vous demander vos préférences Concerant vos données персонала. Veuillez d’abord désactiver la «Protection contre le sistage», puis nous vous demanderons vos preférences. | Choisir mes preférences… |
Восстание родственников и сотрудников
ПРИМЕЧАНИЕ.
Votre vie privée est précieuse: nous la уважение. |
En utilisant ce site, vous accept que nous utilities des technologies telles que des statistiques anonymes et cookies for améliorer votre expérience de navigation sur notre site, personnaliser lecontenu et la publicité, et analyzer notre traffic.
Ces information anonymes peuvent être partagées avec nos partenaires de médias sociaux, de publicité et d’analyse de Confiance.
- Nous ne collectons aucune donnée именительный падеж.
- Vos fichiers sont traités de manière 100% анонимность.
- Nous ne gardons aucun fichier: Не требует поддержки за 15 минут после еды.
L’usage de cookies sur ce site permet d’améliorer votre expérience en ligne, garantir son bon fonctionnement, améliorer ses fonctionnalités, nous permettre de suiventes pernfic pernfication per nus permettre de suiventes pernfication per nous permettre de suivre notre tranous permettre de suivre notre tranous permettre de suivre notre tranffic.