PNG в вебе и дизайне: где использовать, а где лучше SVG или WebP

Где PNG по-настоящему силён

Чтобы понять, когда брать PNG, достаточно запомнить две его суперспособности: сжатие без потерь и честный альфа-канал (полупрозрачность по каждому пикселю). «Без потерь» означает, что после сохранения картинка остаётся пиксель в пиксель такой же, как в редакторе — никаких артефактов вокруг резких краёв, которыми грешит JPG.

Из этих двух свойств вытекают сценарии, где PNG почти вне конкуренции:

• Скриншоты интерфейсов. Резкие линии, мелкий текст, контрастные кнопки — всё это PNG сохраняет идеально. JPG на том же скриншоте размывает буквы и оставляет «грязь» вокруг границ.
• Графика с текстом и чёткими краями. Инфографика, схемы, баннеры с надписями, мемы — везде, где важна резкость контуров.
• Изображения со сложной прозрачностью. Мягкие тени, свечения, размытые края, полупрозрачные градиенты — PNG-32 хранит 256 уровней прозрачности на пиксель, и это его коронный номер.
• Растровые логотипы и иконки — когда векторного исходника нет, а картинку нужно положить на любой фон.

А вот для чего PNG подходит плохо — это обычные фотографии. Сжатие без потерь не умеет выбрасывать мелкие, незаметные глазу детали, поэтому фото в PNG весит в разы больше, чем то же фото в JPG или WebP при том же визуальном качестве. Для фотоконтента почти всегда есть формат лучше.

PNG против SVG: растр против вектора

Это первая развилка, на которой ошибаются чаще всего. Разница принципиальная: PNG — растр (сетка пикселей фиксированного размера), SVG — вектор (математическое описание линий и фигур). Вектор можно растянуть от размера марки до фасада здания без единого размытого пикселя.

Что это значит на практике для логотипов, иконок и элементов интерфейса:

Вывод простой: для логотипов, иконок, пиктограмм и UI-элементов в вебе по умолчанию выбирайте SVG. Он легче, всегда резкий, его можно перекрашивать и анимировать прямо в CSS. PNG в этой роли оправдан только как запасной вариант (fallback) для совсем старых систем — или когда у логотипа есть растровый эффект (фотофактура, сложный градиентный шум), который вектором не повторить.

PNG против WebP и AVIF в вебе

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

• WebP поддерживает и сжатие без потерь, и прозрачность — ровно как PNG, но файл получается заметно меньше. Браузерная поддержка — около 95% пользователей.
• AVIF сжимает ещё сильнее (примерно на 50% меньше JPG и на 20–30% меньше WebP при сопоставимом качестве), тоже умеет прозрачность и более глубокий цвет. Поддержка — около 94%.

Когда же PNG по-прежнему лучше WebP или AVIF? В трёх случаях:

• Нужна 100% совместимость без возни с fallback — например, картинка для письма-рассылки, где почтовые клиенты капризны.
• Файл и так крошечный — иконка в 1–2 КБ, где экономия в полкилобайта не стоит усложнения.
• Инструмент или платформа не принимает WebP — старая CMS, конкретный загрузчик, требование заказчика.

Во всех остальных случаях для веба связка «современный формат + PNG/JPG как запасной» выигрывает. Хорошая новость: переводить ничего не нужно вручную — есть конвертер PNG в WebP, который сделает это за секунды.

Ретина и экспорт @2x: чтобы не было «мыла»

Главная ловушка любого растра, включая PNG, — экраны с высокой плотностью пикселей (Retina и аналоги). На таком дисплее один «логический» CSS-пиксель состоит из двух, а то и трёх физических. Если вы положите иконку ровно в её отображаемом размере, браузер растянет её, и она поплывёт — появится то самое «мыло».

Решение для растра — экспортировать в увеличенном размере:

На практике это значит: иконку, которая на сайте видна как 24×24, для PNG нужно отдать ещё и в 48×48, и в 72×72, а потом перечислить варианты в srcset — браузер сам выберет под экран. Звучит как лишняя работа, и она лишняя — поэтому для иконок и логотипов так удобен SVG: ему ретина не страшна в принципе, один файл годится для всех экранов сразу.

Влияние на скорость загрузки и оптимизация

Здесь начинается то, ради чего стоит всё это знать. Картинки — самая тяжёлая часть типичной страницы: по данным Web Almanac за 2025 год, на изображения приходится около 48% всего веса медианной страницы. И именно картинка чаще всего оказывается тем самым крупным элементом, который определяет момент «страница загрузилась» в глазах Google: на мобильных это так примерно для 76% страниц, на десктопе — для 85%.

Вывод: тяжёлый PNG — это не «просто файл побольше», это медленный сайт и просадка в поиске. Хорошая новость в том, что PNG почти всегда можно облегчить без видимой потери качества. Вот рабочий порядок действий, от простого к радикальному:

Практические советы дизайнеру

Соберём разрозненные правила в короткий рабочий чек-лист — то, что стоит держать в голове прямо в момент экспорта из Figma, Photoshop или Illustrator:

• Логотип, иконка, простая пиктограмма? → SVG. PNG — только как fallback.
• Скриншот или графика с текстом? → PNG (или WebP без потерь для веба).
• Фотография без прозрачности? → JPG/WebP/AVIF, но не PNG.
• Фотография с прозрачностью или мягкие тени? → WebP/AVIF, PNG-32 как запасной.
• Делаете растр под веб? → не забудьте про @2x для ретины и про srcset.
• Любой PNG перед заливкой → прогнать через оптимизатор. Всегда. Это бесплатные килобайты скорости.
• Указывайте width и height в разметке — это убирает «прыжки» вёрстки при загрузке и улучшает метрики стабильности.

Как конвертировать PNG (и обратно)

Самый частый практический шаг — перевести готовый PNG в более лёгкий веб-формат. Это делается в браузере за пару секунд, без установки программ:

Другие полезные направления под конкретные задачи:

• PNG → JPG — для фотографий без прозрачности, где нужен минимальный вес.
• PNG → SVG — трассировка простой графики и логотипов в вектор.
• WebP → PNG — обратно в PNG, если инструмент не принимает WebP.

Полный список преобразований всегда есть на странице всех форматов. А если хочется глубже разобраться в самом PNG — загляните в материалы «Что такое PNG» и «Прозрачность в PNG».