Если вам когда-нибудь нужно было разместить логотип на цветном фоне, и вокруг изображения появлялся нежелательный белый прямоугольник, проблема была в формате. PNG был создан, чтобы решить именно эту задачу — среди прочего. Это стандартный формат для любого изображения, которому нужен прозрачный фон или которое не может терять качество при сохранении.
Что означает PNG?
PNG означает Portable Network Graphics — «переносимая сетевая графика». Формат был создан в 1995 году как открытая и бесплатная альтернатива GIF и быстро стал одним из самых используемых форматов изображений в вебе. В отличие от JPG, PNG использует сжатие без потерь (lossless), а значит, при сохранении файла не отбрасывается никакая информация о пикселях.
Как работает PNG?
PNG использует алгоритм сжатия под названием DEFLATE — тот же, что и в файлах ZIP — в сочетании с фильтрами предсказания пикселей. Процесс анализирует повторяющиеся паттерны в изображении и кодирует их более эффективно, не отбрасывая никакой исходной информации.
В результате PNG, сохранённый и открытый заново десять раз, идентичен оригинальному файлу, пиксель в пиксель. Это делает формат идеальным для любого контекста, где критична визуальная точность — например, скриншоты, логотипы и изображения, которые будут многократно редактироваться.
PNG также поддерживает специальный канал под названием альфа-канал, который управляет прозрачностью каждого пикселя по отдельности. Пиксель может быть полностью непрозрачным, полностью прозрачным или иметь любой уровень полупрозрачности между этими крайностями — это позволяет создавать сглаженные края и тени с настоящей прозрачностью.
Какие преимущества у PNG?
- Прозрачность с альфа-каналом: полная поддержка прозрачности, включая полупрозрачность и сглаженные края. Это единственный широко поддерживаемый формат, позволяющий размещать изображения на любом фоне без белого прямоугольника.
- Сжатие без потерь: оригинальное качество сохраняется полностью, независимо от того, сколько раз файл был сохранён или открыт заново.
- Идеален для текста и чёткой графики: прямые линии, текст и области сплошного цвета выглядят идеально чётко в PNG, без артефактов сжатия, характерных для JPG.
- Универсальная совместимость: поддерживается всеми браузерами, операционными системами и программами для редактирования изображений.
- Поддержка глубокого цвета: PNG поддерживает изображения 8 бит (256 цветов), 24 бита (16,7 миллиона цветов) и до 48 бит для профессиональных приложений.
Какие ограничения у PNG?
- Файлы фотографий больше: сжатие без потерь менее эффективно, чем сжатие lossy в JPG, для фотографий. Фото в PNG может быть в 5–10 раз больше, чем то же фото в JPG с эквивалентным визуальным качеством.
- Нет поддержки анимации: PNG — статичный формат. Для анимированных изображений с прозрачностью альтернативами служат WebP или APNG (анимированный PNG), но с более ограниченной поддержкой.
- Не подходит для фото на сайтах: использование PNG для фотографий на сайтах может значительно ухудшить скорость загрузки. Для фото JPG или WebP всегда правильный выбор.
💡 Практическое правило: используйте PNG, когда изображению нужен прозрачный фон, когда это логотип, иконка, скриншот или любая графика с текстом и чёткими краями. Для фотографий на сайтах предпочитайте JPG или WebP — они намного легче без заметной потери качества.
PNG-8 vs PNG-24 — в чём разница?
| Характеристика | PNG-8 | PNG-24 |
|---|---|---|
| Количество цветов | До 256 цветов | До 16,7 миллиона цветов |
| Прозрачность | Бинарная (да или нет для пикселя) | Полный альфа-канал (256 уровней) |
| Размер файла | Меньше | Больше |
| Идеально для | Простых иконок, графики с малым числом цветов | Логотипов, изображений с полупрозрачностью |
Для большинства современных задач — особенно логотипов и изображений со сглаженными краями — PNG-24 подходит лучше всего, так как обеспечивает полную прозрачность с любым уровнем непрозрачности.
Когда использовать PNG?
Используйте PNG в следующих ситуациях:
- Логотипы и визуальная идентичность: когда логотип нужно размещать на фонах разных цветов без белого прямоугольника.
- Скриншоты: интерфейсы, дашборды и системные экраны выглядят с идеально чётким текстом в PNG.
- Иконки и элементы UI: кнопки, иллюстрации и элементы интерфейса, которым нужны чистые края.
- Изображения для редактирования: когда изображение будет многократно открываться, редактироваться и сохраняться, PNG избегает накопительной потери качества, свойственной JPG.
- Инфографика с текстом: графика и изображения, сочетающие текст и визуальные элементы, выглядят намного чётче в PNG.
PNG vs JPG vs WebP — полное сравнение
| Характеристика | PNG | JPG | WebP |
|---|---|---|---|
| Сжатие | Без потерь (lossless) | С потерями (lossy) | Оба |
| Прозрачность | Да (альфа-канал) | Нет | Да |
| Идеально для фото | Нет | Да | Да |
| Идеально для логотипов и иконок | Да | Нет | Да |
| Размер для фото | Очень большой | Маленький | Очень маленький |
| Размер для логотипов | Маленький-средний | Средний (с артефактами) | Маленький |
| Универсальная поддержка | Да | Да | Современные браузеры |
Как уменьшить размер файлов PNG?
Даже будучи форматом без потерь, размер PNG можно значительно уменьшить. Методы включают снижение глубины цвета (с PNG-24 до PNG-8, когда изображение использует мало цветов), удаление ненужных метаданных и применение более эффективных алгоритмов сжатия, таких как используемые в компрессоре изображений ImageTools. Во многих случаях размер PNG можно уменьшить на 30–50% без какой-либо заметной потери качества.
Сожмите ваши PNG без потери качества
Уменьшите размер файлов PNG, сохранив оригинальную прозрачность и чёткость. Бесплатно и прямо в браузере.
Сжать изображения PNG