WebP vs JPG vs PNG: какой формат изображений использовать в 2026

Чем различаются WebP, JPG и PNG

WebP — это формат изображений от Google, который умеет сжатие с потерями и без потерь, прозрачность и анимацию. JPG (стандарт JPEG 1992 года) сжимает только с потерями и не хранит прозрачность. PNG сжимает без потерь и хранит альфа-канал: каждый пиксель сохраняется точно, но файл выходит тяжёлым.

Сжатие с потерями отбрасывает детали, которые глаз почти не замечает. На фото это незаметно, а на скриншоте с мелким текстом вокруг букв появляются артефакты. Поэтому формат выбирают по типу картинки, а не «один на весь сайт».

Замер: одно изображение в четырёх форматах

Исходник — фотореалистичный портрет 4096×4096. Мы пересохранили его в JPG с качеством 85 (sips на macOS) и в PNG без потерь. Затем прогнали JPG через наш конвертер в WebP и AVIF с настройками по умолчанию. Второй прогон — та же картинка, уменьшенная до 1600×1600: такой размер реально уходит на страницу.

Качество мы сверили метрикой SSIM, где 1,0 — полное совпадение с исходником. На версии 1600×1600 у WebP вышло 0,990, у AVIF — 0,995. На глаз разницы нет. AVIF в этом прогоне оказался тяжелее WebP: с настройками по умолчанию конвертер сохраняет в нём больше деталей. Итог зависит от картинки и параметров кодека, поэтому проверяйте на своих файлах.

Какой формат выбрать для каждой задачи

Короткое правило: всё, что показывается на странице, отдавайте в WebP, а JPG и PNG держите для мест, где WebP не принимают. Подробнее по типам изображений:

• Фото, баннеры, карточки товаров — WebP: минус 45–50% веса в нашем замере
• Скриншоты интерфейса, схемы, логотипы с мелким текстом — PNG или WebP без потерь: резкие края не обрастают артефактами
• Графика с прозрачностью — PNG или WebP, JPG альфа-канал не хранит
• Почта, печать, загрузка в старые CMS и маркетплейсы — JPG: его принимают везде
• Крупные фото, где важен каждый килобайт, — сравните WebP и AVIF на своём файле

JPG стоит держать как запасной вариант. Его открывает любая программа, у него аппаратное декодирование на телефонах и камерах. Но на низком качестве JPG даёт заметные блоки и ореолы, а прозрачные области заменяет сплошным фоном.

Проверьте на своём изображении

Бросьте любое фото в мини-конвертер ниже: он сохранит его в WebP и покажет размер до и после. В полном инструменте можно выбрать AVIF и качество. Бесплатно, без регистрации.

Как отдавать WebP с фолбэком на JPG

Выбирать один формат не обязательно. Элемент <picture> перечисляет варианты, и браузер берёт первый, который умеет показывать. Старый браузер пропустит source и загрузит JPG из тега img.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Главное фото товара" width="1200" height="800">
</picture>

Атрибуты width и height у img обязательны: по ним браузер резервирует место до загрузки, и вёрстка не прыгает. Это влияет на метрику CLS из Core Web Vitals. Если картинки отдаёт CDN, он может сам выбирать формат по заголовку Accept — тогда разметка остаётся с одним img.

Самая дешёвая победа по скорости на большинстве сайтов — перекодировать десять самых тяжёлых картинок.

Как перевести сайт на WebP за 4 шага

• Найдите самые тяжёлые изображения: вкладка Network в DevTools с фильтром Img или наш SEO-аудит, который проверяет вес и форматы картинок
• Уменьшите их до реального размера на странице — фото 4096 px для блока шириной 800 px тратит трафик впустую
• Конвертируйте в WebP и сохраните исходники: повторное сжатие с потерями каждый раз ухудшает качество
• Отдайте WebP через <picture> или CDN и повторите замер — вес страницы должен упасть

Вопросы и ответы

WebP лучше JPG?

Для сайта — да. При том же визуальном качестве WebP легче: в нашем замере на 45–50%, по данным Google — на 25–34%. JPG выигрывает только совместимостью за пределами браузера.

Все ли браузеры поддерживают WebP?

Почти все: по caniuse — 96,7% пользователей. Chrome показывает WebP с версии 32, Firefox — с 65, Safari на iOS — с 14. Для оставшихся отдайте JPG через <picture>.

Теряется ли качество при конвертации JPG в WebP?

Немного — это повторное сжатие с потерями. В нашем замере SSIM WebP к исходнику — 0,990, на глаз разницы нет. Храните исходники и конвертируйте из них, а не из уже сжатых копий.

Что выбрать: WebP или AVIF?

Начните с WebP: он поддерживается шире и кодируется быстрее. AVIF попробуйте на крупных фото и сравните размеры. В нашем прогоне с настройками по умолчанию AVIF вышел тяжелее WebP, но точнее по SSIM.

Инструменты и источники

Конвертер и сжиматель бесплатны и без регистрации. Источники цифр о форматах и поддержке браузеров: