PNG против WebP: столкновение поколений
Почти 20 лет золотое правило веб-дизайна было простым: JPG для фотографий, PNG для изображений, которым нужен прозрачный фон (альфа-канал). Но формат WebP, продвигаемый Google с 2010 года и массово внедрённый с 2020-го, спутал все карты.
Стоит ли сегодня полностью изгнать PNG с наших сайтов? Ответ неоднозначен — но вердикт склоняется вполне определённо.
Проблема PNG: структурный тяжеловес
PNG (Portable Network Graphics) использует lossless-сжатие (без потерь). Это идеально для сохранения безупречной чёткости текста, векторных контуров и однотонных заливок, но порождает чрезвычайно тяжёлые файлы.
Несколько порядков величины, наблюдаемых на практике:
- иллюстрированный баннер 1920×600 с градиентами в PNG: 800 КБ – 1,4 МБ;
- сложный логотип с отбрасываемыми тенями: 180 – 350 КБ;
- скриншот интерфейса в 1440p: 2,5 – 4 МБ.
В мобильной сети 4G (медиана ~12 Мбит/с) такой вес означает 0,5 – 2,5 секунды загрузки на одно изображение. Умножьте на 15 картинок на странице товара — и ваш LCP взлетает.
Подавляющее преимущество WebP
WebP выглядит как универсальный швейцарский нож:
- он поддерживает прозрачность (как PNG);
- он может использовать lossy-сжатие (с потерями, незаметными для глаза, как у JPG) или lossless (на выбор);
- он поддерживает анимацию (как замена тяжёлым GIF);
- при равном визуальном качестве файл WebP в среднем на 26 % легче, чем PNG, а разница может достигать 80 % на иллюстрациях со сложными градиентами.
Подробное сравнение: 1 изображение, 3 формата
Исходник: векторная иллюстрация, экспортированная в 1200×800 пикселей, с прозрачностью и градиентами.
| Формат | Вес | Сжатие | Прозрачность | Совместимость |
|---|---|---|---|---|
| PNG-24 | 612 КБ | Без потерь | Да (alpha 8-бит) | 100 % |
| WebP lossless | 312 КБ | Без потерь | Да (alpha 8-бит) | 96 % |
| WebP lossy 85 | 88 КБ | С потерями | Да (alpha 8-бит) | 96 % |
| AVIF 80 | 54 КБ | С потерями | Да (alpha 10-бит) | 92 % |
В этом примере переход с PNG на WebP lossy даёт экономию 524 КБ, то есть 85 % — без заметной визуальной разницы.
Совместимость с браузерами: конец спора
Сегодня WebP поддерживается 96 % браузеров в мире (источник: caniuse.com, май 2026). Отговорка про несовместимость больше не работает:
- Chrome ≥ 32 (2014)
- Firefox ≥ 65 (2019)
- Safari ≥ 14 (macOS Big Sur, iOS 14 — сентябрь 2020)
- Edge ≥ 18 (2018)
Единственный реально проблемный случай — это Internet Explorer, чья доля на мировом рынке упала ниже 0,3 % и который Microsoft официально вывел из эксплуатации в июне 2022 года.
Вердикт: когда что использовать?
- Оставьте PNG только для:
- очень мелких графических элементов (простые иконки в стиле pixel art, фавиконы), где вес и так составляет несколько килобайт;
- исходных файлов, передаваемых в типографию (которая часто требует PNG, TIFF или PSD);
-
экспортов из дизайн-программ (Figma, Sketch) до публикации в вебе.
-
Переходите на WebP для всего остального:
- сложные логотипы с тенями или обтравкой;
- иллюстрации для блога;
- маркетинговые баннеры;
- фотографии товаров (как альтернатива JPG, WebP примерно на 30 % легче при равном качестве);
- скриншоты интерфейсов.
А как же AVIF?
Если вы стремитесь к максимальной оптимизации, AVIF (~50 % легче,
чем WebP в lossy) — это будущее. Но его совместимость пока держится
на уровне 92 %, а кодирование заметно медленнее. Лучшая практика в
2026 году: отдавать AVIF с запасным вариантом WebP через тег
<picture>:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="…" loading="lazy">
</picture>
Оптимизируйте ассеты без утечки данных
Если вы ведёте сайт клиента, загрузка его графических ассетов (иногда под NDA, иногда до анонса запуска продукта) на сторонний онлайн-конвертер — это дыра в безопасности и риск нарушения законодательства о персональных данных.
Конвертируйте PNG в WebP в один клик с MediaBay. Код выполняется прямо в вашем браузере: коммерческая тайна ваших клиентов остаётся на вашем рабочем компьютере. Ни один файл не попадает на сторонний сервер, утечка невозможна.
Автор: Никола Маркович · опубликовано 17 мая 2026 года.