WebP vs JPEG vs PNG: какой формат и когда
Обновлено
Три формата покрывают почти все изображения в вебе. Правильный выбор — это разница между чёткой лёгкой страницей и тяжёлой замыленной.
JPEG: фотографии
JPEG создан для фотографий и любых изображений с плавными градиентами и множеством цветов. Он использует сжатие с потерями, отбрасывая детали, незаметные глазу, ради малого размера. Прозрачность он не поддерживает, поэтому не годится для логотипов и элементов интерфейса, которые лежат на цветном фоне.
Для фотографий хорошо закодированный JPEG разумного качества — по-прежнему отличный и универсально поддерживаемый вариант.
PNG: логотипы, иконки, прозрачность
PNG — без потерь и с поддержкой прозрачности, поэтому идеален для логотипов, иконок, скриншотов и графики с чёткими краями и плоским цветом. Расплата — размер: фотографические PNG большие. Используйте PNG, когда важны резкие края или альфа-канал, а не для полноцветных фото.
Умная палитровая компрессия уменьшает большинство PNG на 50–80% без видимых изменений, потому что реальные логотипы и интерфейсы используют куда меньше цветов, чем PNG резервирует места.
WebP: современный выбор по умолчанию
WebP делает обе работы: у него есть режим с потерями, который обыгрывает JPEG на фото, и режим без потерь с прозрачностью, который обыгрывает PNG на графике — обычно на 25–35% легче аналога. На 2026 год его поддерживают все актуальные браузеры, так что для новых проектов это разумный выбор по умолчанию для веба.
Главная причина всё ещё отдавать JPEG или PNG — если файл будут скачивать и открывать в старом десктопном софте, не читающем WebP.
Короткая рекомендация
Для веба: сначала WebP, а JPEG или PNG — запасной вариант только там, где нужно. Для обмена файлами с людьми: JPEG для фото, PNG для всего с прозрачностью. Что бы вы ни выбрали — сожмите перед публикацией. Формат задаёт потолок эффективности; забирает его именно сжатие.