Что такое PNG? Сжатие без потерь и прозрачность

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

Как появился PNG: GIF и патент на LZW

В начале 1990-х годов большая часть графики в вебе была в формате GIF, а GIF использовал алгоритм сжатия LZW, запатентованный компанией Unisys. Согласно истории формата, написанной Грегом Рулофсом, лицензионное соглашение между CompuServe и Unisys было без лишнего шума объявлено 28 декабря 1994 года, и у программ, записывающих файлы GIF, замаячила перспектива лицензионных отчислений. После реакции в Usenet Томас Бутелл 4 января 1995 года опубликовал первый черновик свободного от патентов формата, тогда называвшегося «PBF». Название «PNG» было предложено 6 января и принято в черновике 5 от 23 января 1995 года. Спецификация была заморожена в черновике 9 от 7 марта 1995 года.

W3C опубликовал PNG как Рекомендацию 1 октября 1996 года, а по данным Библиотеки Конгресса США тот же текст был опубликован IETF как RFC 2083 в январе 1997 года. Второе издание с учетом исправлений вышло 10 ноября 2003 года и стало международным стандартом ISO/IEC 15948. Третье издание PNG от W3C, опубликованное 24 июня 2025 года, включило в официальную спецификацию анимированный PNG (APNG), блок cICP для сигнализации HDR и блок eXIf для данных EXIF.

Как работает сжатие PNG

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

1. Фильтры строк

Перед сжатием каждая строка пикселей проходит через фильтр. Вместо значения самого пикселя фильтр сохраняет разницу с соседями, а в однородных или плавных областях эти разницы близки к нулю, поэтому сжимаются гораздо лучше. Спецификация определяет пять типов фильтров: None, Sub (пиксель слева), Up (пиксель сверху), Average (среднее левого и верхнего) и Paeth (предсказание по левому, верхнему и верхнему левому пикселям). Кодировщик может выбирать свой фильтр для каждой строки.

2. DEFLATE

Отфильтрованные данные сжимаются алгоритмом DEFLATE, тем же, что используется в файлах ZIP, и хранятся в формате zlib внутри блоков IDAT. Это единственный метод сжатия, определенный спецификацией, и он использует скользящее окно размером не более 32 КБ. Разные программы создают из одного и того же изображения PNG разного размера, потому что тратят больше или меньше усилий на выбор фильтров и настройки DEFLATE; само изображение при этом идентично.

Структура блоков

Файл PNG начинается с 8-байтовой сигнатуры, за которой следуют блоки (chunks): IHDR для заголовка, IDAT для данных изображения и IEND для завершения файла. Необязательные блоки могут содержать цветовой профиль (iCCP), гамму (gAMA), текст (tEXt, iTXt) и простую прозрачность (tRNS).

Типы цвета, глубина и прозрачность

PNG поддерживает изображения в оттенках серого, палитровые (индексированные) и полноцветные. По данным Библиотеки Конгресса, глубина отсчетов составляет от 1 до 16 бит; типичные RGB-изображения используют 8 бит на канал (24 бита), а при необходимости 16 бит на канал (48 бит). Необязательный альфа-канал хранит отдельное значение прозрачности для каждого пикселя. Это гораздо гибче, чем простая прозрачность GIF по принципу «включено/выключено»: тени, мягкие края и полупрозрачные слои выглядят правильно.

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

Палитровый PNG и уменьшение числа цветов

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

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

Насколько широко используется PNG?

По данным W3Techs за октябрь 2026 года, PNG используется на 74,9% отслеживаемых сайтов, что делает его самым распространенным форматом изображений на сайтах. Согласно Web Almanac 2024 от HTTP Archive, 28,4% изображений на мобильных страницах имеют формат PNG, уступая только JPEG (32,4%). В том же отчете медианный PNG использует 3,8 бита на пиксель против 2,0 у JPEG и 1,3 у WebP. Широкое распространение PNG на сайтах во многом объясняется логотипами и иконками, которым нужна прозрачность; если отдавать большие фотографии в PNG, страницы становятся неоправданно тяжелыми.

Когда использовать PNG, а когда выбрать другой формат

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

Частые проблемы

Почему мой PNG такой большой?

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

Конвертация JPG в PNG не улучшила качество

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

Прозрачность исчезла после конвертации в JPG

У JPG нет альфа-канала. При конвертации прозрачные пиксели заливаются сплошным цветом; если вы его не выберете, будет использован цвет программы по умолчанию (обычно белый или черный).

Цвета выглядят иначе

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

Советы по конвертации PNG

• Уменьшайте фотореалистичные PNG. При конвертации PNG в JPG качество по умолчанию равно 90; прозрачные области по умолчанию заливаются белым, но можно выбрать другой цвет фона.
• Чтобы сохранить прозрачность, конвертируйте PNG в WebP или PNG в AVIF; оба формата хранят альфа-канал. Если в WebP каждый пиксель должен остаться точно таким же, отметьте «WebP без потерь»; файл может вырасти.
• Уменьшить PNG, оставив его PNG, можно лишь в ограниченных пределах: пока изображение остается тем же, выигрыш дает только подбор более удачных фильтров и сжатия. Наше сжатие изображений по умолчанию конвертирует статичные PNG в WebP; если вы хотите оставить PNG, дополнительная опция оптимизации PNG постарается уменьшить файл, не изменив ни одного пикселя.
• Нужна иконка? Конвертер PNG в ICO упаковывает квадратную иконку размером 16, 32 и 48 пикселей (и более крупных размеров, если изображение достаточно большое) в один файл.
• Эти конвертации выполняются в вашем браузере, поэтому файлы никогда не покидают ваше устройство. EXIF и данные о местоположении в результат не записываются.

Часто задаваемые вопросы

PNG сжимает с потерями или без?

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

Поддерживает ли PNG анимацию?

Базовый PNG не поддерживает. Анимацию добавляет расширение APNG, которое стало частью спецификации в третьем издании PNG от W3C. По данным MDN, все современные браузеры показывают APNG, но многие графические редакторы открывают только его первый кадр.

Что означают PNG-8 и PNG-24?

Этих названий нет в спецификации; это сокращения, которые используют программы. PNG-8 обычно означает палитровый PNG до 256 цветов, PNG-24 полноцветный PNG с 24 битами на пиксель, а PNG-32 PNG в RGBA с альфа-каналом.

Что выбрать: PNG или WebP?

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

Подходит ли PNG для печати?

По качеству да, ведь это формат без потерь, но PNG не поддерживает цветовую модель CMYK. В профессиональной полиграфии обычно предпочитают TIFF или PDF.

Источники

• W3C: Portable Network Graphics (PNG) Specification (Third Edition)
• W3C: обзор и история PNG
• Грег Рулофс: History of the Portable Network Graphics (PNG) Format
• Библиотека Конгресса США: описание формата PNG
• Google for Developers: An image format for the Web (WebP)
• MDN: Image file type and format guide
• W3Techs: статистика использования форматов изображений на сайтах
• HTTP Archive Web Almanac 2024: Media