Кодирование на основе AV1
Использует предсказание движения и многоплосковое кодирование из видео-кодека AV1. Это даёт лучшее сжатие, но требует больше вычислений. Поддерживает 10- и 12-битную глубину, HDR и альфа-канал.
IRISBIN · Гид по форматам
AVIF против WebP:
AVIF против WebP:
что выбрать в 2024 году?
Разбираем, чем codecs AVIF и WebP отличаются по качеству, скорости кодирования и поддержке браузерами — и где каждый из них оправдан. Материал подготовлен командой IRISBIN на основе реальных бенчмарков.
Обновлено: 12 марта 2024 · Чтение: 9 мин · Автор: Дмитрий Ковалёв, инженер IRISBIN
Выбор формата изображения давно перестал быть вопросом «WebP или JPEG». Сегодня основной вопрос — когда стоит отдавать AVIF, а когда WebP остаётся оптимальным балансом качества и производительности. Ниже — практический разбор для фронтенд-команд, которые хотят ускорить LCP без потери визуального качества.
Мы прогнали один и тот же набор из 1 200 реальных изображений (фото, иллюстрации, иконки, баннеры) через оба кодека при разных уровнях качества и сравнили размер файла, время кодирования и воспринимаемое качество.
Введение
Эволюция форматов изображений
До появления WebP и AVIF весь веб жил на JPEG, PNG и GIF. JPEG давал хорошее сжатие для фотографий, но без альфа-канала; PNG был без потерь, но тяжёлым; GIF — устаревшим и ограниченным палитрой. Каждый формат закрывал узкую нишу.
WebP, вышедший в 2010 году, объединил оба сценария: сжатие с потерями на уровне JPEG и без потерь на уровне PNG, плюс прозрачность. Он быстро стал де-факто стандартом для оптимизации.
AVIF, основанный на кодеке AV1 (Alliance for Open Video, 2018), пришёл как следующий шаг: заметно лучшее сжатие при том же качестве, но ценой значительно более медленного кодирования. Сегодня оба формата поддерживаются всеми современными браузерами, и вопрос — не «работает ли», а «какой выгоднее для конкретной картинки».
Алгоритмы
Кодеки и потери: как устроено сжатие
Разница между AVIF и WebP начинается в самом сердце — в кодеке, который превращает пиксели в биты.
Быстрый кодек VP8
Основан на видео-кодеке VP8, оптимизированном для скорости. Кодирование в разы быстрее AVIF, что делает WebP идеальным для динамических ресурсов и генерации множества вариантов на лету.
Потери и качество
Оба формата — с потерями. При равном размере файла AVIF сохраняет больше деталей и меньше артефактов. Но при низком качестве (< 40) WebP может выглядеть чище на простых графиках.
Бенчмарки
Размер файла vs время кодирования
Средние показатели по 1 200 изображениям при quality = 78. Данные за март 2024.
−31%
размер AVIF против WebP
6.4×
медленнее кодирование AVIF
42ms
медиана кодирования WebP
268ms
медиана кодирования AVIF
Сравнение
Сколько весит каждый формат
Конкретные цифры для типовых задач. Все значения — медиана по набору тестовых изображений.
Фотографии
AVIF: 182 КБ · WebP: 264 КБ. AVIF выигрывает на ~31% и лучше сохраняет текстуры кожи и градиенты неба.
Графика и иконки
AVIF: 54 КБ · WebP: 61 КБ. Разница скромнее — у плоской графики меньше данных для сжатия, но AVIF всё равно чище.
Широкие баннеры
AVIF: 96 КБ · WebP: 138 КБ. На больших площадях с текстом AVIF заметно экономит трафик и ускоряет загрузку.
Браузеры
Поддержка и фолбэк-стратегии
К 2024 году AVIF поддерживают Chrome, Edge, Firefox, Safari (с версии 14) и Opera. Совместимость WebP ещё шире — она стабильна уже с 2014 года и покрывает практически все реальные браузеры, включая старые версии.
На практике это значит, что фолбэк нужен только для очень старых клиентов. Стандартный подход — отдавать AVIF через <picture> с type="image/avif" и резервным WebP-вариантом ниже, либо полагаться на Accept-заголовок и серверную детекцию.
IRISBIN делает это автоматически: по Accept и User-Agent выбирает AVIF для поддерживающих браузеров и WebP для остальных, кэшируя оба варианта на edge. Разработчик не пишет ни одной ветки фолбэка.
Практика
Рекомендации для разработчиков
Что выбрать в каждой конкретной ситуации — без абстракций.
Статичные ассеты — AVIF
Логотипы, баннеры, обложки и любые картинки, которые генерируются один раз в CI/CD. Медленное кодирование не имеет значения, а экономия 30%+ в размере — постоянная.
Динамические ресурсы — WebP
Аватары, превью и картинки, генерируемые на лету при первом запросе. Быстрое кодирование WebP критично, чтобы не задерживать ответ. Разница в размере здесь менее важна.
Не выбирайте — делегируйте
Если не хотите держать логику в голове, подключите IRISBIN: сервис сам отдаёт AVIF или WebP под браузер, генерирует srcset и кэширует результат. Один вызов вместо целого пайплайна.
Попробовать
Автоматический выбор
Автоматический выбор
AVIF или WebP
Подключите IRISBIN и забудьте про фолбэки: сервис сам отдаёт лучший формат под каждый браузер и кэширует результат на edge. Бесплатный тариф — 500 000 запросов в месяц.