Что такое PNG: история, характеристики, сравнение

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

Формат PNG появился в 1995 году как ответ на патентные ограничения алгоритма LZW в GIF. Томас Боутелл 4 января предложил альтернативу на Usenet. Через три недели вышла первая версия под названием PBF, а 23 января — PNG. В декабре 1995 года W3C рассмотрел спецификацию версии 0.92, а 1 октября 1996 года официально рекомендовал PNG 1.0 как международный стандарт. Группа PNG Development Group обеспечила открытость формата и свободу от патентных ограничений.

Принцип сжатия Lossless (Без потерь)

PNG использует алгоритм DEFLATE — комбинацию LZ77 для поиска повторяющихся последовательностей пикселей и кодирования Хаффмана для оптимизации. Сжатие без потерь сохраняет каждый пиксель: повторное сохранение не деградирует качество, в отличие от JPEG, который применяет DCT с потерями и удаляет детали для уменьшения размера. PNG подходит для графики с текстом, где важна четкость и контрастность.

Глубина цвета: PNG-8, PNG-24 и PNG-32
PNG-8 применяет индексированную палитру до 256 цветов, подходит для простых иконок и веб-графики, как GIF. PNG-24 хранит TrueColor в 16,7 млн оттенков без поддержки прозрачности — для полноцветной графики. PNG-32 добавляет альфа-канал: 8 бит на прозрачность, итого 32 бита на пиксель. Максимальная глубина цвета достигает 48 бит с гамма-коррекцией для полутоновых изображений.

Альфа-канал регулирует прозрачность от 0 до 255 на каждый пиксель, создавая полупрозрачность и градиенты. GIF ограничивается однобитовой прозрачностью: пиксель либо полностью прозрачный, либо полностью непрозрачный. PNG создает мягкие тени, размытые края, плавные переходы — идеально для UI-элементов и веб-баннеров. Альфа-канал решает проблему наложения логотипов: на темном фоне тень выглядит естественно, что повышает конверсию на 15% по A/B-тестам.

PNG vs JPEG:
PNG выигрывает в графике с текстом и логотипами — нет артефактов на краях. JPEG лучше для полноцветных фотографий, где сжатие с потерями незаметно.

PNG vs GIF:
PNG поддерживает 16,7 млн цветов против 256 в GIF, плавная прозрачность с полупрозрачностью против однобитовой.

PNG vs WebP:
WebP сжимает на 25-35% лучше, но PNG надежнее в legacy-браузерах и имеет более широкую поддержку.

PNG vs SVG: SVG масштабируется без потери качества и занимает минимум места, PNG — для растровой детализации и сложных изображений.

Идеальные сценарии (Use Cases)
PNG идеален для:
• Логотипы и иконки — сохранение четкости при любом масштабировании, прозрачный фон для наложения на разные фоны
• Скриншоты и текст на изображениях — высокая контрастность, отсутствие размытия соседних пикселей
• Изображения с прозрачностью — веб-баннеры, постеры, дизайн сайтов, UI-элементы
• Инфографика и визуализация данных — графики, диаграммы, схемы с четкими элементами
• Промежуточные версии при редактировании — качество не ухудшается при повторном сохранении
• Полиграфия и подготовка к печати — сохранение высокого качества и точной цветопередачи (при условии конвертации в CMYK)

Когда PNG не подходит
Полноцветные фотографии большого размера нагружают сайт — WebP или JPEG сжимают в 2-3 раза эффективнее. Сложные градиенты без прозрачности тоже лучше в JPEG. Если скорость загрузки критична, используйте WebP с PNG fallback.

Важное ограничение: PNG работает в RGB (для экранов), полиграфия требует CMYK (для печати на офсетных станках). При конвертации из PNG в CMYK происходит потеря цветовой точности: синий уходит в фиолетовый, красный теряет насыщенность. Используйте TIFF или PDF с CMYK-профилем для типографий. Полиграфисты конвертируют PNG в EPS заранее — экономит 20% времени на правках и согласованиях.

PNG тяжелее JPEG из-за lossless-сжатия: фото в 2-5 МБ против 500 КБ в JPEG. Методы оптимизации:
• Удаление метаданных и EXIF-данных
• Уменьшение битности (PNG-8 вместо PNG-32 для простой графики)
• Очистка палитры от неиспользуемых цветов
• Использование специализированных оптимизаторов

Популярные инструменты:
• TinyPNG — онлайн-сжатие с потерями (улучшенное качество), сжимает на 70% без видимых потерь
• pngquant — уменьшение палитры цветов для PNG-8
• Zopfli — максимальное сжатие без потерь, глубже стандартного DEFLATE
• ImageOptim (Mac) — автоматическая оптимизация
• Squoosh (Google) — веб-инструмент с предпросмотром

Как открыть PNG-файл
На Windows: встроенное приложение "Фотографии" или Paint.
На Mac: Preview (встроенное приложение).
На Android/iPhone: встроенная галерея.
Браузеры: Chrome, Safari, Firefox, Edge отображают PNG везде.
Графические редакторы: Adobe Photoshop, Figma (веб-приложение), GIMP (бесплатно).

Как создать и экспортировать PNG
В Figma:
1. Выделите слой или компонент
2. Панель справа → "Экспорт"
3. Выбрать PNG, установить масштаб
4. Background: None для прозрачности
5. Шахматка подтвердит прозрачность

В Photoshop:
1. File → Export As
2. Выбрать PNG
3. "Сохранить для Web" для оптимизации
4. Установить качество сжатия и прозрачность

Конвертация: из PNG в другие форматы

APNG (Animated PNG)
APNG — расширение PNG, позволяющее создавать анимированные изображения подобно GIF, но с преимуществами PNG:
• Поддержка полного цветового спектра (16,7 млн цветов против 256 в GIF)
• Полная прозрачность и полупрозрачность
• Лучшее сжатие, чем GIF
Поддержка браузерами: Chrome, Firefox, Safari, Edge (практически все современные браузеры с 2018 года).

Interlaced PNG (Adam7)
Чересстрочная развертка — при медленном интернете изображение появляется сначала размытым, затем постепенно уточняется. Полезно для улучшения пользовательского опыта на медленных соединениях и 3G.

Метаданные PNG
PNG хранит EXIF, гамму, цветовые профили — удаляйте для оптимизации размера файла.

Преимущества
• Сжатие без потерь — полная сохранность деталей и цветов при любой степени сжатия
• Поддержка альфа-канала — создание изображений с прозрачностью и полупрозрачностью
• Высокая цветовая глубина — до 48 бит для максимальной точности цветопередачи
• Практически неограниченное количество цветов — в отличие от GIF с его 256 цветами
• Гамма-коррекция и расширяемость — возможность добавления пользовательских блоков (основа APNG)
• Бесплатность и открытость — алгоритмы свободны от патентов и доступны для всех

Недостатки
• Большой размер файлов — PNG-файлы занимают больше места, чем JPEG (в 2-5 раз)
• Не подходит для печати без конвертации — использует RGB вместо CMYK
• Медленнее JPEG при декодировании — может влиять на производительность на старых устройствах
• Не поддерживает встроенные цветовые профили — сложнее работать с точной цветопередачей в полиграфии

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

Почему мой PNG не отображается с прозрачностью в старых браузерах?
Старые версии Internet Explorer имели ограниченную поддержку PNG с альфа-каналом. Современные браузеры (Chrome, Firefox, Safari, Edge) полностью поддерживают PNG-32 с прозрачностью с 2010-х годов.

Можно ли конвертировать PNG в вектор (SVG)?
Да, но с ограничениями. Используйте инструменты трассировки (Potrace, Adobe Illustrator) для простых изображений с четкими контурами. Сложные фотографии не конвертируются качественно в вектор.

Какой формат лучше для логотипа?
Идеально использовать SVG (масштабируется без потери качества), но если требуется растровый формат — PNG-32 с прозрачностью обеспечит лучший результат.

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

Как выбрать между PNG-8, PNG-24 и PNG-32?
PNG-8 для простых иконок (256 цветов), PNG-24 для графики без прозрачности, PNG-32 для логотипов и UI с прозрачностью.