Пнг что за формат

Пнг что за формат

27 июля, 2023

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

Вступайте в клуб начинающих дизайнеров и получайте подарки

Содержание

1. Особенности формата
2. Где применяется формат PNG
3. Краткая история формата PNG
4. Какой программой открыть PNG на разных операционных системах
5. Как создать PNG-файл
6. Конвертеры PNG-файлов
7. Плюсы и минусы формата PNG

Особенности формата

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

Основной и отличительной особенностью PNG является то, что изображение можно сохранить без фона, то есть фон будет прозрачным. В других растровых форматах это недоступно. Такая особенность делает PNG-файл универсальным. Картинку без фона удобно применять во время дизайна баннеров, постеров, сайтов, она может легко подстроиться под уже имеющиеся элементы на веб-странице и сочетаться с ними. В поисковике такую картинку легко визуально распознать по фону с серыми квадратиками, условно обозначающими прозрачность. Однако после того как вы скачаете и откроете изображение, квадратики должны пропасть, а фон должен стать «пустым».

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

Однако прозрачность — необязательная опция. Вы вполне можете использовать PNG просто в качестве полноцветной картинки, не вырезая фон.

Где применяется формат PNG

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

Краткая история формата PNG

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

Какой программой открыть PNG на разных операционных системах

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

Для просмотра PNG-формата на ОС Windows понадобится один из следующих вариантов:

• любая встроенная утилита для просмотра графики, например приложение «Фотографии» или Microsoft Paint;
• любой установленный сервис для просмотра графики, например ACDSee;
• любой веб-браузер;
• графические редакторы Adobe Illustrator или Photoshop;
• облачное хранилище Microsoft OneDrive, облака Google Drive, Яндекс.Диск, Mail.ru, Dropbox.

• встроенные программы «Фото» и «Просмотр»;
• браузер Safari;
• графические редакторы, например ColorStrokes.

• приложение «Фото»;
• сторонние редакторы, например Pixelmator;
• облачные хранилища Google Drive, Яндекс.Диск и др.

• встроенная программа просмотра фото;
• сторонние графические редакторы, например Adobe Photoshop Express;
• облачные хранилища.

Как создать PNG-файл

Создать с нуля файл формата PNG несложно, но процесс может занять много времени в первый раз, если вы не веб-дизайнер и непосредственно не связаны с данной профессией. Понадобится графический редактор (например, Photoshop, MS Paint, Procreate и др.), в котором нужно открыть картинку в другом формате или нарисовать ее с нуля, а затем сохранить в PNG. В Photoshop это делается через опцию «Сохранить как» и выбор нужного формата.

ИСКРА —
неделя знакомства
с дизайн-профессиями

Какие они — востребованные в IT дизайн-профессии? Знакомьтесь с ними в течение недели, выбирайте подходящую и получайте полезные подарки каждый день.

разжечь искру

Конвертеры PNG-файлов

Чтобы конвертировать изображение или файл в PNG-формат, можно, например, использовать следующие инструменты в формате онлайн:

• AnyMP4;
• FastStone;
• Adapter;
• Pixillion;
• IMG2GO;
• XnConvert;
• ZamZar и др.

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

Плюсы и минусы формата PNG

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

Плюсы формата PNG:

• С точки зрения цветового диапазона у PNG существуют несколько вариантов цветовой палитры: от 8-битной (256 цветов) до 48-битной (десятки миллионов цветов). Этот факт говорит нам о том, что у PNG очень широкий цветовой диапазон.
• PNG-файл работает со сжатием без потерь исходного качества или с совсем незначительным ухудшением, которое сложно выделить визуально.
• Размер изображений достаточно компактный по сравнению с фотоформатами (например, RAW).
• С помощью уменьшения прозрачности изображения можно добиться его плавного сочетания с фоном, причем интенсивность прозрачности может меняться от максимальной контрастности до полного исчезновения.
• Если необходимо зафиксировать авторство, то можно добавить в формат необходимые метаданные.

Минусы формата PNG:

• невозможность анимировать картинку;
• на данный момент нельзя в один файл сохранить несколько изображений;
• PNG-файлы зачастую весят больше, чем JPEG и GIF.

Это основные преимущества и недостатки PNG-формата изображений, но, конечно, это не отменяет субъективных особенностей и выводов, которые может вынести для себя каждый пользователь при работе с данным типом файлов.

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

О формате PNG. Краткий тест-драйв

Растровый графический формат PNG, набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF’а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.

• Полноценная поддержка alpha-transparency – прозрачности. Позволяет сделать участки изображения прозрачными и полупрозрачными.
• Качественный алгоритм сжатия без потери качества. Похожий на LZW, но немного эффективнее.
• Возможность черезстрочной развёртки, причем (в отличии от GIF) как по вертикали, так и по горизонтали одновременно.
• Встроенная гамма-коррекция. Позволяет прикрепить к изображению настройки его отображения, для того чтобы на разных мониторах изображение отображалось точно так же, как и у автора.

PNG vs GIF

Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения:

Практика (как и мнение коллег) показывает, что простые небольшие изображения GIF сжимает лучше. Но, когда речь заходит о больших изображениях, GIF всё же остаётся позади.

Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал, как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного позже).

PNG vs JPEG

А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG’у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на – JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.

В общем, смотрите сами:

UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует – проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% – выигрыш раза в полтора).

Жизнь после Photoshop’а или сжимаем дальше

Во многих ситуациях PNG остаётся вообще незаменимым, так как прозрачность нормально не поддерживается ни одним из альтернативных веб-форматов, а какой простор он открывает дизайнерам и верстальщикам… UPD Кроме того, с учётом специфики формата, для элементов дизайна в вебе – это, наверное, лучшее решение.

Гуглим и качаем – PNGOut. Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.

На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.

• OptiPNG – не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше. UPD но её пользователи утверждают обратное.
• Pngcrush – сам не пробовал, говорят «пытается оптимизировать файл всеми доступными способами», но главное ведь не «как пытается», а «как оптимизирует».
• и ещё ряд утилиток просто вычищающих служебный мусор из файлов.

Adobe Fireworks

Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!

3 версии формата в AF:

PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 – с альфа-каналом, а 24 – без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.

А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF’а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение – PNG-8 в большинстве случаев уделывает и GIF, и PNG-24.

PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop’овским результатом разница в пользу PNG:

И вот всё разнообразие PNG-8 — ради этого стоит устанавливать Adobe Fireworks:

Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.

Вердикт

По-моему, GIF своё уже отжил. Теперь его существование – в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF :).

Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).

Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 – как и раньше, с GIF’ом, смелые эксперименты – залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.

Всем веб-дизайнерам и верстальщикам рекомендую устанавливать Adobe Fireworks и взглянуть на PNG в новом ракурсе.

UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно kmike и @merlin_rterm. В процессе узнал для себя много нового, в частности, специфику сжатия PNG и что JPEG-100 все равно с потерей качества. Большая часть этих интересностей добавлены прямо в тексте статьи, для того, чтобы не отрывать их от контента.

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

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

• Ширина, 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 байт

IEND

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

IDAT

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

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

Заключение

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

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

Файл формата png: чем открыть, описание, особенности

PNG (Portable Network Graphics) — графический формат растрового типа, содержащий 8-битную цветовую п.

PNG (Portable Network Graphics) — графический формат растрового типа, содержащий 8-битную цветовую палитру. Разработанный для PNG-файлов алгоритм сжатия Deflate уменьшает размер сохраняемого изображения без потери качества итоговой картинки.

В этой статье вы также узнаете чем открыть файл PNG.

Характеристика

PNG – второе по популярности интернет-форматом после JPG.

Среди прочих достоинств стоит отметить:

• чересстрочную верстку;
• встроенную программную коррекцию цветовой палитры и гаммы.

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

У формата 2 версии:

• PNG-8 (индексная цветовая гамма схожа с таковой в GIF);
• PNG-24 (полноценная и полноцветная палитра, имитирующая JPEG).

История возникновения

В 1995 году, в эпоху развития свободного интернета, резко встал вопрос о проприетарности сложного формата GIF. Был необходим столь же надежный но бесплатный и свободный формат для обмена графическими данными во всемирной паутине. В это время на международном консорциуме W3C были представлены спецификации PNG 1.0, утвержденные уже в 1996.

Формат создавался как альтернатива GIF. Последний до 2004 года был «закрытым», т. е. имел ряд ограничений для вольного использования (требовал авторских прав владельца при сохранении, патентные лицензии при размещении). PNG лишили подобных недостатков, при этом реализовали поддержку глубины цвета до 48 бит и 8-битного альфа-канала для передачи картинки.

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

Чем открыть файлы формата PNG

Сегодня графический формат без проблем демонстрируется в интернет-обозревателе и стандартных средствах для просмотра графики. Если говорить более развернуто — картина следующая: для работы с форматом в каждой ОС предусмотрен свой инструментарий. Рассмотрим подробно, чем открыть формат PNG.

Онлайн

Для просмотра файлов в интернете используйте следующее ПО:

Windows 7-10

ОС семейства Windows открывают PNG-формат следующим способом:

• средство просмотра фотографий;
• MS Paint;
• Photoshop CC/Illustrator CC;
• ACDSee 2018;
• веб-браузер (только для просмотра).

Android

Мобильная ОС располагает такими средствами:

iOS

Мобильная кот для Apple работает с PNG-файлами с помощью такого ПО:

MacOS

Для стационарной ОС Apple предусмотрен такой набор программ:

• Apple Фото/Просмотр;
• ColorStrokes;
• Toast 17.

Если говорить только о режиме «read only» (только для чтения), то справится обыкновенный графический обозреватель, встроенный в операционку.

Проблемы с файлом PNG

Указанные файлы имеют недостатки в профессиональной сфере:

• невозможно сохранить анимированный файл в PNG;
• формат не поддерживает цветовую схему CMYK;
• файлы не подходят для профессиональной обработки графики.