Если ты хоть раз занимался оптимизацией скорости загрузки сайтов, то знаешь, какую львиную долю трафика пожирают изображения. Долгие годы мы сидели на классическом JPEG и PNG, затем перешли на WebP, а сегодня на арену вышли два тяжеловеса нового поколения — AVIF и JPEG XL.
В сообществе не утихают жаркие споры: сторонники JPEG XL называют его универсальным форматом будущего, а фанаты AVIF указывают на его фантастическую эффективность сжатия. Чтобы расставить точки над «i», известный веб-инженер Джейк Арчибальд (Jake Archibald, экс-Google и Shopify) провел масштабное независимое исследование, протестировав свежие версии кодеков avifenc 1.4.2, libjxl 0.12.0 и jixel 0.4.2 на сотнях разнородных изображений.
Результаты этого баттла оказались неожиданными и развеяли сразу несколько устойчивых мифов.
Сжатие фотографий с потерями: безоговорочная победа AVIF
Главный фронт борьбы в вебе — это обычные фотографии с легким сжатием (lossy). И здесь AVIF уверенно укладывает соперника на лопатки.
При стандартных настройках энкодеров файл в формате JPEG XL при одинаковом визуальном качестве (замеренном по объективной метрике SSIMULACRA2) оказывается на 15–25% больше, чем AVIF. Если выкрутить ползунки сжатия на максимум, разрыв сокращается, но JPEG XL все равно остается на 6–20% тяжелее. Лишь на редких кадрах со сверхсложной текстурой вроде шерсти горностая JPEG XL выходит на паритет, но в 90% типичных контентных фото AVIF выигрывает всухую.
При этом Арчибальд предостерегает от использования устаревшей субдискретизации 4:2:0: в AVIF рекомендуется использовать режим 4:4:4. Он практически не увеличивает размер файла, но предотвращает размытие мелких цветных деталей.
Скриншоты и прозрачность: разгромный счет
В интерфейсной графике разрыв становится колоссальным. В вебе долго жил стереотип: скриншоты программ и диаграммы нужно сохранять строго в lossless PNG, иначе текст «поплывет».
Исследование показало, что lossy AVIF с субдискретизацией 4:4:4 справляется со скриншотами потрясающе: мелкие буквы интерфейсов остаются четкими и легко читаемыми без неприятных артефактов вокруг символов. А вот JPEG XL на скриншотах терпит сокрушительное поражение: его файлы получаются на 30–90% тяжелее AVIF при стандартных настройках и на 20–70% тяжелее при максимальных.
Еще печальнее ситуация с прозрачностью. AVIF по умолчанию аккуратно жмет альфа-канал с потерями, экономя байты. Новый энкодер jixel в JPEG XL сжимает прозрачность строго без потерь, из-за чего итоговый вес картинки с прозрачным фоном взлетает в 2–3 раза по сравнению с аналогичным AVIF.
Где JPEG XL берет реванш
Означает ли это, что JPEG XL можно списать со счетов? Ни в коем случае. У него есть три уникальных козыря, которые AVIF пока не способен перекрыть:
- Сжатие без потерь (Lossless): если тебе необходимо попиксельное сохранение оригинала (например, в полиграфии или медицинских снимках), JPEG XL — безоговорочный лидер. Lossless WebP на 9–17% тяжелее, а lossless AVIF проигрывает колоссальные 30–120%.
- Переупаковка старых JPEG: JPEG XL умеет пересжимать существующие файлы JPEG без потерь информации, уменьшая их размер на 9–20% без перекодирования и без артефактов поколения.
- Сверхвысокие разрешения: на огромных фотографиях свыше 18 мегапикселей декодер Chrome отрисовывает JPEG XL заметно быстрее и с меньшим расходом оперативной памяти, чем AVIF.
Что ставить в прод сегодня
Практический вывод из тестирования предельно прагматичен.
Если твоя цель — максимальная скорость загрузки страниц, экономия мобильного трафика пользователей и отличные показатели Core Web Vitals, основным форматом по умолчанию в веб-продакшене должен оставаться AVIF 4:4:4.
JPEG XL великолепен для архивного хранения оригиналов без потерь, галерей сверхвысокого разрешения и автоматической оптимизации старых JPEG-библиотек. Но для повседневной веб-разметки AVIF сегодня дает максимальный выигрыш в каждом переданном по сети байте.