WebP, AVIF или JPG — какой формат выбрать?

Начните с задачи, а не с аббревиатуры

Отправляете отпускные фото родителю на старом планшете? Берите JPG. Госформы, банковские загрузки и типографии, принимающие только JPEG, всё ещё ждут его — совместимость редко стоит риска.

Свой сайт, блог или каталог с современными браузерами? WebP часто заметно режет размер при виде близком к JPG и, в отличие от JPEG, умеет прозрачность.

Гонитесь за каждым килобайтом на высоконагруженной странице и можете отдавать несколько источников через `<picture>`? Тогда AVIF стоит проверить — но никогда не отдавайте только AVIF без запасного JPG или WebP для клиентов, которые его не декодируют.

JPG: фотоформат, на котором все ещё говорят

JPEG — сжатие с потерями, заточенное под фото: портреты, пейзажи, события. Телефоны, ноутбуки, CMS и соцсети открывают его без драмы.

Плохо подходит для прозрачного фона, плоских логотипов или UI-скриншотов, где текст должен оставаться острым. Там — PNG или WebP.

Каждое «Сохранить как JPG» добавляет поколение потерь. Экспортируйте один раз из самого чистого исходника, а не прыгайте между форматами.

WebP: рабочая лошадка современного веба

При похожем визуальном качестве на фото WebP обычно побеждает JPG по байтам — иногда с большим запасом. Ещё и альфа-канал, которого у JPEG просто нет.

Статический хостинг, CDN и большинство фреймворков уже умеют отдавать WebP. Почтовые клиенты — исключение: многие всё ещё показывают вложения как обычный JPEG, поэтому картинки в письмах часто остаются JPG.

Когда PNG-скриншот раздут, конвертация в WebP обычно уменьшает сильнее, чем повторное сохранение PNG. Поэтому наш поток сжатия PNG по умолчанию выводит WebP.

AVIF: меньше файлы, больше нюансов

На насыщенных фотосценах AVIF часто снова обгоняет WebP — ценой более медленного кодирования и пробелов на старых устройствах или встроенных WebView в приложениях.

В проде обычно отдают AVIF как предпочтительный источник внутри `<picture>`, с WebP или JPG как запасными — браузер выбирает лучший понятный формат.

Если пайплайн уже мучается со временем кодирования AVIF или команда ещё не настроила fallback, сначала правильно внедрить WebP часто даёт большую часть выигрыша с меньшей болью.

Шпаргалка (правила большого пальца)

Должно работать на любом устройстве, которым вы не управляете → JPG.

Современный hero или карточки с путём fallback → WebP, или AVIF плюс запас WebP/JPG.

Прозрачность в вебе → WebP или PNG; PNG — когда нужна максимальная legacy-терпимость к альфе.

Картинки внутри тела письма → в большинстве случаев всё ещё JPG.

Сомневаетесь → экспортируйте WebP и JPG рядом, откройте сжатие изображений и сравните размер с тем, что принимают глаза.

Формат — половина истории: важны размер и качество

Фото шириной 4000 px в WebP всё ещё тяжёлое, если его не уменьшали. Сначала уменьшите до ширины показа, потом выбирайте формат.

Когда формат и габариты на месте, проход сжатия может срезать последние проценты. Храните мастер-оригинал при lossy-выводе, чтобы не наслаивать поколения.