AVIF против JPEG XL: какой формат изображений выбрать в 2024 году

Оптимизация изображений — один из самых простых способов ускорить сайт. Одна фотография легче на 100 КБ — казалось бы, мелочь. Но когда таких картинок сотни, а посетителей тысячи, экономия превращается в реальные мегабайты трафика и секунды загрузки.

Когда JPEG XL получил поддержку в браузерах, сообщество разработчиков вздохнуло с облегчением. Наконец-то современный формат с отличным сжатием! Но не всё так однозначно. Давайте разберёмся, что показывают реальные тесты.

Главный вывод для тех, кому некогда

Для веб-проектов AVIF стабильно выигрывает у JPEG XL по размеру файлов. При обычных настройках качества JPEG XL создаёт картинки на 15–25% тяжелее аналогичных AVIF. Если выкрутить оба кодировщика на максимум, разрыв сокращается до 6–20%, но AVIF всё равно впереди.

Важен и выбор конкретного инструмента. Кодировщик jixel обычно сжимает лучше, чем классический libjxl. Но эта разница исчезает — и даже переворачивается — когда речь заходит о прозрачности.

Скриншоты и иллюстрации: AVIF вне конкуренции

Здесь разница особенно заметна. Скриншоты интерфейсов, макеты дизайна, векторные иллюстрации — AVIF справляется значительно лучше.

При стандартных настройках JPEG XL занимает на 30–90% больше места. Даже на максимальном качестве — всё равно на 20–70% тяжелее. Многие думают, что для скриншотов нужен lossless-формат. Но поверьте, lossy AVIF выглядит отлично и весит в разы меньше.

Делаете документацию, дашборды, превью дизайна? AVIF — ваш выбор по умолчанию.

Прозрачность: свои нюансы у каждого

С прозрачностью форматы работают по-разному. AVIF сохраняет прозрачность при lossy-сжатии и не раздувает файл. А вот libjxl при прозрачности увеличивает размер на 31–44% при обычных настройках и на 61–70% при максимальных — по сравнению с AVIF.

jixel поступает иначе: альфа-канал кодируется без потерь. Звучит как преимущество в качестве? Проблема в том, что результат весит в 2–3 раза больше AVIF. Иногда lossless — не то, что вам нужно.

Скорость кодирования: что важнее

Для CI/CD-пайплайнов с тысячами картинок скорость имеет значение. AVIF кодирует быстрее и потребляет меньше памяти — это ускоряет сборки и экономит ресурсы сервера.

jixel в этом плане удивляет — работает быстрее AVIF и памяти ест меньше. Но помните: быстрый результат обычно крупнее. Выигрыш в скорости теряется из-за потерь в сжатии. Если считать общее количество байт для пользователей, AVIF остаётся выгоднее.

Декодирование: где решается скорость загрузки

Пользователю важно, как быстро загрузится страница, а не билд. И здесь AVIF снова побеждает: JPEG XL декодируется в 2–3 раза дольше при среднем качестве.

Любопытно: на очень высоком качестве Chrome иногда быстрее обрабатывает JPEG XL. Но для обычных веб-настроек AVIF декодируется шустрее, а значит — страницы открываются быстрее.

Настройки качества: не всё одинаково полезно

Высокие настройки effort (медленнее, но эффективнее) действительно окупаются и для AVIF, и для jixel. Но у libjxl максимальный effort — совсем другая история.

libjxl в режиме максимального сжатия работает невероятно медленно, жрёт память, а иногда ещё и создаёт файл крупнее, чем при стандартных настройках. Если пользуетесь libjxl — оставьте default. Хотите лучший JPEG XL — попробуйте jixel.

HDR: пока рано

High Dynamic Range контент требует особого подхода. У JPEG XL есть технология gain map для HDR на обычных дисплеях, но браузеры её пока не поддерживают. Инструменты кодирования тоже экспериментальные.

AVIF работает с HDR более зрело, хотя идеального решения для доставки HDR сgraceful-деградацией ни один формат пока не предлагает. Для веба HDR остаётся нишевым сценарием.

Совместимость с JPEG: козырь JPEG XL

У JPEG XL есть уникальная фича — обратная совместимость с JPEG. Можно конвертировать старые JPEG-файлы и получить выигрыш в 9–20% без потери качества. Формат включает инструменты для этого.

Если у вас большая библиотека изображений, 15% экономия на тысячах файлов — это ощутимо.

Lossless: единственное, где JPEG XL выигрывает

Для случаев, когда без потерь не обойтись, JPEG XL действительно лучше. Lossless WebP тяжелее на 9–17%, а lossless AVIF — на 30–120% по сравнению с JPEG XL.

Но! Lossless-изображения почти никогда не нужны для веба. Штраф по размеру редко оправдан выигрышем в качестве. Если выкладываете на сайт картинки без потерь — задумайтесь. А если всё-таки надо — не выкручивайте effort у jixel слишком сильно: декодирование станет мучительно медленным.

Что выбрать для проекта

Рекомендация: AVIF с chroma subsampling 4:4:4 и максимальным effort. Качество того стоит, а выигрыш по размеру перед JPEG XL заметен почти всегда.

Но протестируйте на своём контенте. Бывают случаи, когда JPEG XL сжимает так же хорошо или даже лучше. Если какой-то тип картинок AVIF обрабатывает странно — попробуйте jixel и сравните результат.

Оба формата развиваются быстро. То, что выгоднее сегодня, может измениться через полгода. Ландшафт форматов продолжает меняться.

Формат — не всё

Оптимизация изображений — это не только выбор формата. Это билд-пайплайны, настройка CDN, адаптивные изображения, lazy loading. Формат — один из инструментов, не единственный.

Для разработчиков на Vibe Hosting от NameOcean хорошая новость: современная инфраструктура поддерживает эти форматы из коробки. Сжатие происходит один раз при деплое, а все преимущества получают ваши посетители.

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

Какие форматы изображений используете вы? Экспериментировали с AVIF или JPEG XL? Делитесь опытом в комментариях.