PNG (Portable Network Graphics)

Что такое PNG?

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

Как это работает?

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

Метрики и стандарты

По данным HTTP Archive на июнь 2026 года, PNG применяется на 77% сайтов для элементов с прозрачностью, но его средний размер в 3–5 раз превышает JPEG при фотографическом качестве, а конвертация в WebP с сохранением прозрачности сокращает вес файла на 60–80% без видимой потери чёткости. Каждые лишние 100 КБ PNG на мобильной странице увеличивают Largest Contentful Paint на 0,08–0,12 секунды на 4G-соединении, что снижает конверсию целевой страницы на 1,5–2%.

Почему это важно для бизнеса?

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

Пример применения

Студия веб-дизайна загружала все портфолио-превью в PNG-24, чтобы избежать артефактов. Страница с 40 проектами весила 32 МБ и грузилась 11 секунд, отказы достигали 60%. Массовая конвертация фотографий в оптимизированный JPEG (качество 90%) и оставление в PNG только скриншотов интерфейсов с текстом сократили вес страницы до 7 МБ. Загрузка упала до 2,9 с, отказы снизились до 31%, а заявки выросли на 24%.

Как это реализуется в WordPress?

WordPress нативно принимает PNG в медиабиблиотеку и генерирует миниатюры стандартными средствами GD или ImageMagick Engine (последний точнее сохраняет альфа-канал). Контроль над PNG реализуется через:

• Плагины сжатия без потерь — Smush, EWWW Image Optimizer, ShortPixel (режим Lossless) удаляют метаданные и применяют DEFLATE-оптимизацию без изменения пикселей.
• Конвертация вWebP — WebP Express, Imagify, Optimole автоматически создают WebP-копии с прозрачностью и отдают их через тег <picture>, сокращая размер на 60–80%.
• Серверный уровень — CDN-сервисы (Cloudflare Polish, Bunny Optimizer) динамически конвертируют PNG в WebP на edge-узлах без нагрузки на origin.
• Хуки темы — фильтр wp_generate_attachment_metadata позволяет принудительно конвертировать PNG в другие форматы при загрузке, если это допустимо бизнес-логикой.

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

Связанные понятия

• Сжатие без потерь (Lossless) — обратимое уменьшение размера файла, при котором распакованное изображение попиксельно идентично исходному.
• Альфа-канал — 8-битный слой прозрачности в PNG-24 и PNG-32, позволяющий создавать полупрозрачные переходы без ореолов.
• DEFLATE — универсальный алгоритм сжатия, используемый в PNG и ZIP, который не вносит искажений в данные.
• WebP — формат-преемник, поддерживающий и сжатие с потерями, и без потерь с прозрачностью, сокращающий вес PNG-файлов на 60–80%.
• ImageMagick Engine — серверный процессор, который WordPress-плагины используют для качественного масштабирования PNG с сохранением альфа-канала.
• МедиабиблиотекаWordPress — встроенное хранилище, где PNG-файлы проходят автоматическую генерацию миниатюр и могут быть оптимизированы плагинами.