Формат изображений AVIF: на 30% меньше WebP

AVIF: Новый король сжатия изображений

AVIF (AV1 Image File Format) основан на технологии видеокодирования AV1 и является форматом изображения следующего поколения после WebP.

Формат	Кодек	Размер при том же качестве	Поддержка браузерами
JPEG	libjpeg	Базовый	Все
WebP	VP8	-25~35%	97%+
AVIF	AV1	-50~60%	92%+
PNG	deflate	3-5x JPEG	Все

Ключевые данные: При том же качестве SSIM, AVIF на 20-30% меньше WebP и на 50-60% меньше JPEG.

---

Почему AVIF такой маленький?

Преимущества кодирования AV1

1. Внутрикадровое предсказание: Использует пространственную избыточность внутри изображения
2. Трансформирующее кодирование: Поддерживает блоки трансформации от 4×4 до 64×64
3. Матрица квантования: Более точная квантизация в частотной области
4. Синтез зернистости плёнки: Отделяет зернистость, описывает параметрами вместо хранения пикселей

С потерями vs Без потерь

Режим	Сравнение размеров	Сценарий использования
С потерями (CQ 30)	40% от JPEG	Фотографии, скриншоты
С потерями (CQ 50)	25% от JPEG	Миниатюры, превью
Без потерь	50-60% от PNG	Иконки, UI-ресурсы
С потерями + Alpha	30% от PNG	Фотографии с прозрачностью

---

Совместимость с браузерами (2026)

Браузер	Поддержка AVIF	Версия
Chrome	✅	85+
Firefox	✅	93+
Safari	✅	16+
Edge	✅	85+
Samsung Internet	✅	15+
IE	❌	Не поддерживается

Охват 92%+, можно смело использовать в продакшене.

Стратегия деградации

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Фото" loading="lazy">
</picture>

Браузер выбирает первый поддерживаемый формат по порядку.

---

Использование ToolsKu для конвертации в AVIF

Шаги операции

1. Открыть Инструмент конвертации формата изображений
2. Загрузить изображение (поддерживает JPG, PNG, WebP, GIF)
3. Выбрать формат вывода AVIF
4. Настроить параметры качества:
   • Высокое качество (CQ 20-30): Почти без потерь, размер уменьшен на 40-50%
   • Сбалансированный (CQ 35-50): Подходит для большинства сценариев, размер уменьшен на 50-60%
   • Высокое сжатие (CQ 55-70): Миниатюры/превью, размер уменьшен на 60-80%
5. Скачать результат конвертации

Справка по результатам конвертации

Оригинальное изображение	Оригинальный размер	AVIF (CQ 35)	Степень сжатия	SSIM
Фотография пейзажа (4K)	8.2MB	1.1MB	87%	0.95
Фотография портрета	3.5MB	0.5MB	86%	0.94
Скриншот UI	1.2MB	0.15MB	88%	0.97
Иконка (PNG+Alpha)	45KB	12KB	73%	1.00

---

Специальные возможности AVIF

Канал Alpha (Прозрачность)

AVIF поддерживает с потерями + канал Alpha, что недоступно в JPEG:

PNG (прозрачный) 45KB → AVIF (прозрачный, CQ 35) 12KB → размер уменьшен на 73%

HDR / Широкая цветовая гамма

AVIF поддерживает две передаточные функции HDR — PQ и HLG, а также широкую цветовую гамму BT.2020:

Характеристика	JPEG	WebP	AVIF
Глубина цвета	8-bit	8-bit	8/10/12-bit
Цветовая гамма	sRGB	sRGB	sRGB / BT.2020
HDR	❌	❌	✅ PQ/HLG
Alpha	❌	✅	✅

Анимация

AVIF поддерживает анимационные последовательности (AVIS), аналогично анимированному WebP:

Анимированный GIF 2.5MB → Анимированный WebP 0.8MB → Анимированный AVIF 0.5MB

---

Конвертация через командную строку

Использование libavif (avifenc)

# Установка
# macOS: brew install libavif
# Ubuntu: apt install libavif-bin

# Базовая конвертация
avifenc input.jpg output.avif

# Указать качество (0-63, меньше = выше качество)
avifenc -q 30 input.jpg output.avif

# Сжатие без потерь
avifenc --lossless input.png output.avif

# Указать скорость (0-10, медленнее = лучше сжатие)
avifenc -q 35 -s 6 input.jpg output.avif

Использование ImageMagick

# Конвертировать в AVIF
magick input.jpg -quality 65 output.avif

# Пакетная конвертация
magick mogrify -format avif -quality 65 *.jpg

---

Автоматическая конвертация Nginx

# Динамическая конвертация JPEG в AVIF
map $http_accept $avif_suffix {
  "~*image/avif" ".avif";
}

server {
  location ~* ^/.+\.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri =404;
  }
}

Когда клиент поддерживает AVIF, автоматически возвращается версия .avif (требуется предварительная генерация).

---

Лучшие практики

1. Использовать деградацию <picture>: Трёхуровневая деградация AVIF → WebP → JPEG
2. Параметр качества 35-50: Оптимальный баланс для большинства сценариев
3. Предгенерация вместо динамической конвертации: Генерировать при сборке, избегать нагрузки на CPU сервера
4. Фотографии — AVIF, иконки — SVG: Векторная графика не подходит для AVIF
5. Изображения с Alpha использовать AVIF: Заменить PNG, уменьшить размер на 70%+
6. Настроить CDN для автоматической конвертации: Cloudflare Image Resizing / CloudFront поддерживают автоматический возврат AVIF по заголовку Accept