Прозрачный фон: когда выбрать PNG, WebP или SVG
Для фото без фона берите PNG как мастер и WebP для сайта. Для иконки или логотипа, созданного из кривых, выбирайте SVG. JPG прозрачность не поддерживает.
Короткий ответ
PNG — безопасная мастер-копия растрового изображения с прозрачностью. WebP — облегчённая версия для современного сайта. SVG — логотип, иконка или схема, которые изначально состоят из векторных фигур. JPG прозрачность не хранит.
Сравнение без рекламных обещаний
| Формат | Лучше всего подходит | Ограничение |
|---|---|---|
| PNG. | Скриншоты, интерфейсы, вырезанные товары, мастер-копии. | Фотография может весить много. |
| WebP. | Фотографии и графика на веб-странице. | Нужна проверка цепочки публикации и качества. |
| SVG. | Иконки, логотипы, диаграммы и простая векторная графика. | Не является волшебной векторизацией фотографии. |
| JPG. | Фото на сплошном фоне. | Нет альфа-канала. |
Что хранит альфа-канал
Альфа-канал задаёт непрозрачность каждого пикселя. Он может хранить не только полностью прозрачный или непрозрачный участок, но и промежуточные значения. Модель альфа-канала PNG описана в спецификации W3C; благодаря промежуточным значениям волосы, мягкая тень и сглаженный край выглядят естественно на разных фонах.
Три типичных сценария
Товар для интернет-магазина
Храните вырезанный оригинал в PNG. Для сайта сделайте WebP-копию. Поддержка альфа-данных WebP описана в документации Google. Откройте обе версии на белом и сером фоне: это покажет ореол и потерянную тень.
Логотип
Если дизайнер передал настоящий SVG из кривых, используйте его для интерфейса и печати после проверки. Спецификация SVG 2 описывает векторные графические элементы; помещение маленького PNG внутрь SVG не восстанавливает контуры. Для векторизации нужна трассировка и ручная проверка узлов.
Скриншот программы
PNG обычно сохраняет резкий текст и линии без характерных JPEG-ореолов. Прозрачность нужна только если часть кадра действительно должна просвечивать.
Частые ошибки
- «Шахматка» видна в готовом файле. Иногда она была нарисована в самом изображении. Проверьте файл на однотонном фоне.
- После загрузки фон стал чёрным. Просмотрщик или сервис не поддержал прозрачность. Попробуйте WebP → PNG или добавьте нужный фон.
- После PNG → JPG фон стал белым. Это ожидаемо: JPG не умеет хранить альфа-канал.
- JPG → PNG не улучшил качество. Смена контейнера не восстанавливает детали, потерянные прежним сжатием.
Как проверить результат
- Откройте файл на светлом и тёмном фоне.
- Увеличьте край до 200% и проверьте ореолы.
- Посмотрите размеры в пикселях и реальный вес файла.
- Загрузите копию в целевой сайт или приложение.
- Сохраните исходный PNG или SVG отдельно от оптимизированной версии.
Почему размер нельзя обещать заранее
WebP нередко уменьшает фотографии, но итог зависит от содержимого, размеров, режима сжатия и качества. Простая иконка может хорошо сжаться одним способом, а шумная фотография — другим. Сравнивайте не только килобайты: откройте оба файла рядом в реальном масштабе и посмотрите на границы, текст и градиенты.
Как готовить файл для сайта
Сначала определите фактический размер показа. Нет смысла отдавать огромный исходник в небольшую карточку. Сделайте WebP нужных размеров, а PNG оставьте как редактируемую мастер-копию. Укажите в HTML ширину и высоту, чтобы страница не меняла компоновку во время загрузки.
Когда оставить PNG
Оставьте PNG, если изображение будет дальше редактироваться, если важна поддержка в сторонней программе или если после WebP появились заметные артефакты. Оптимизация — выбор под конкретную площадку, а не обязательная замена всех файлов одним форматом.
Для анимации сравнивайте требования площадки: прозрачный статичный кадр и анимированный файл — разные задачи. Не выбирайте формат только по наличию альфа-канала. Проверьте первый и последний кадр, скорость воспроизведения и вес результата в целевом браузере.
Сверено 1 сентября 2026 года по спецификациям W3C и документации Google WebP. Для краткой сравнительной таблицы см. также справочник MDN по форматам изображений.
