AVIF — формат изображений нового поколения, обещающий файлы на 50% меньше JPEG при лучшем качестве. Но если вы выбираете AVIF как формат вывода, а файл становится больше, а не меньше — ваш браузер на самом деле не поддерживает AVIF-кодирование.

Что такое AVIF?

AVIF (AV1 Image File Format) — современный формат изображений на базе видеокодека AV1. Он разработан Alliance for Open Media (AOMedia) и предлагает действительно впечатляющие возможности сжатия:

  • На 50% меньше, чем JPEG при эквивалентном визуальном качестве
  • На 20% меньше, чем WebP при эквивалентном качестве
  • Поддерживает контент HDR (High Dynamic Range)
  • Поддерживает прозрачность (альфа-канал)
  • Поддерживает анимацию (заменяя GIF)
  • Без роялти и с открытым исходным кодом

По всем меркам AVIF — будущее веб-изображений. Однако есть важное различие между декодированием (просмотром) и кодированием (созданием) изображений AVIF.

Декодирование против кодирования: ключевое отличие

Большинство современных браузеров могут отображать изображения AVIF без проблем. Chrome, Firefox, Safari и Edge поддерживают декодирование AVIF — то есть могут показывать изображения AVIF на веб-страницах без каких-либо проблем.

Но кодирование — фактическое создание файла AVIF с нуля — совсем другая история. Это требует, чтобы браузер реализовал AVIF-кодирование в своём Canvas API, что вычислительно дорого и намного сложнее в реализации, чем декодирование.

Поддержка AVIF-кодирования в браузерах (на март 2026)

БраузерДекодирование AVIFКодирование AVIF (canvas.toBlob)
Chrome 121+✅ Да✅ Да
Firefox✅ Да❌ Нет
Safari✅ Да❌ Нет
Edge✅ Да✅ Да (на базе Chromium)
Мобильный Chrome✅ Да✅ Да
Мобильный Safari✅ Да❌ Нет

Что на самом деле происходит, когда ваш браузер не поддерживает AVIF-кодирование

Здесь всё становится интересным — и запутанным. Когда вы выбираете AVIF как формат вывода, но ваш браузер не может кодировать AVIF, происходит следующее:

Тихий откат

Метод canvas.toBlob(callback, 'image/avif', quality) Canvas API не выбрасывает ошибку, когда AVIF-кодирование не поддерживается. Вместо этого он делает кое-что незаметное:

  1. Тихо откатывается к формату PNG
  2. MIME-тир результирующего blob становится image/png вместо image/avif
  3. Файл сохраняется с расширением .avif, но фактическое содержимое — PNG

Это означает, что ваш «AVIF»-файл на самом деле PNG под прикрытием — а PNG — формат без потерь, который обычно создаёт файлы в 3-5 раз больше оригинального JPEG. Вот почему ваше изображение кажется выросшим в 5 раз!

Реальное влияние

Представьте такой сценарий: вы загружаете фото JPEG на 500КБ и выбираете AVIF как формат вывода, ожидая файл около 250КБ. Но вместо этого:

  • Ваш браузер тихо выдаёт PNG → файл становится 2.5МБ
  • Расширение файла говорит .avif, но содержимое — PNG
  • Другие инструменты могут не открыть его, поскольку расширение не соответствует содержимому
  • Вы можете подумать, что AVIF — ужасный формат, тогда как на самом деле ваш браузер его просто не поддерживает

Как мы определяем поддержку AVIF

Img Zip проактивно определяет, поддерживает ли ваш браузер AVIF-кодирование. Мы создаём крошечный canvas 1×1 пиксель и пытаемся закодировать его как AVIF:

canvas.toBlob(blob => {
  if (blob !== null && blob.type === 'image/avif') {
    // AVIF-кодирование поддерживается!
  } else {
    // Не поддерживается — покажет предупреждение
  }
}, 'image/avif');

Если браузер возвращает blob другого типа (например, image/png) или null, мы знаем, что AVIF-кодирование недоступно, и чётко показываем предупреждение «Браузер не поддерживается» в выборе формата.

А что насчёт формата ICO?

У файлов ICO (значок) похожая проблема. Canvas API вообще не поддерживает ICO-кодирование — ни один браузер его не реализует. Когда вы выбираете ICO как вывод, браузер откатывается к PNG, что даёт файл с расширением .ico, но содержимым PNG.

Для целей favicon современные браузеры фактически принимают PNG-файлы с расширением .ico, так что этот обходной путь часто работает. Но это не настоящий ICO-файл.

Что делать, если ваш браузер не поддерживает AVIF?

Вариант 1: Используйте WebP вместо этого

WebP поддерживается всеми современными браузерами как для декодирования, так и для кодирования. Он обеспечивает сжатие на 25-35% лучше, чем JPEG — не так хорошо, как 50% AVIF, но всё же отличное и универсально поддерживаемое.

Вариант 2: Перейдите на браузер на базе Chromium

Если AVIF-кодирование для вас важно, Chrome 121+ и Edge (на базе Chromium) сейчас предлагают лучшую поддержку. Оба могут кодировать AVIF через Canvas API.

Вариант 3: Используйте настольное ПО

Для профессионального AVIF-кодирования специализированные настольные инструменты, такие как squoosh (собственный инструмент Google), libavif или Photoshop с плагинами AVIF, обеспечивают надёжное кодирование независимо от поддержки браузера.

Будущее поддержки AVIF в браузерах

Хорошая новость в том, что поддержка AVIF-кодирования расширяется. По мере того, как кодек AV1 становится более распространённым (благодаря внедрению видеостриминга), разработчики браузеров вкладываются больше в поддержку кодирования. Мы ожидаем, что Firefox и Safari добавят AVIF-кодирование Canvas в будущих обновлениях.

Когда все основные браузеры поддержат AVIF-кодирование, браузерные инструменты, такие как Img Zip, смогут предоставлять AVIF-сжатие всем — обеспечивая абсолютно лучшую оптимизацию изображений без установки ПО.

Заключение

AVIF — невероятный формат, но поддержка кодирования в браузере всё ещё догоняет. Если при выборе AVIF вы видите предупреждение «Браузер не поддерживается», не волнуйтесь — это не баг, это ограничение вашего текущего браузера. Используйте WebP как надёжную альтернативу или перейдите на браузер на базе Chromium для полной поддержки AVIF-кодирования.

Img Zip всегда будет прозрачен насчёт того, что ваш браузер может и не может, чтобы вы никогда не получали неожиданных результатов.

Попробуйте сжать изображения сейчас — мы автоматически определим, что поддерживает ваш браузер.