Развертывание AVIF для более адаптивных веб-сайтов

Обновленная информация о том, как AVIF был принят в экосистеме.

Яни Хуопонен
Jani Huoponen
Винеш Венкатасубраманиан
Vignesh Venkatasubramanian

AVIF — это новый формат изображений, который быстро завоевывает популярность в Интернете благодаря высокой степени сжатия, эффективной производительности и широкому распространению. AVIF — это открытый формат изображений, не требующий лицензионных отчислений, основанный на видеокодеке AV1, стандартизированном Альянсом открытых медиа. В этом сообщении блога будет представлен обзор того, как AVIF применяется в экосистеме, а также каких преимуществ в производительности и качестве разработчики могут ожидать от AVIF для неподвижных изображений и анимации.

Что нового в экосистеме AVIF?

С момента появления AVIF в Chrome, Firefox и Safari использование AVIF в Интернете неуклонно растет; сегодня почти все браузеры поддерживают AVIF.

Только в Chrome использование AVIF выросло примерно до одного процента чуть больше чем за год после того, как Chrome добавил поддержку AVIF в стабильной версии.

Линейный график использования AVIF в Chrome с мая 2021 года по март 2023 года. Поддержка неуклонно росла с 0% до чуть менее 1,4%.

Ряд CDN изображений, таких как Akamai , Cloudflare , Cloudinary и Imgix, сегодня обслуживают изображения AVIF. В сообщении в блоге, объявляющем о поддержке AVIF, Imgix сообщил об экономии размера файла на 60 % по сравнению с JPEG и на 35 % по сравнению с WebP. Такая экономия размера файла приводит к значительной экономии места, а также помогает страницам загружаться быстрее, сокращая время наибольшей отрисовки контента (LCP) . LCP — это один из основных веб-показателей , который показывает, насколько быстро загрузился самый большой блок контента на странице. Использование современных кодеков для сжатия изображений — один из ключевых методов уменьшения LCP. Lighthouse — отличный инструмент разработчика Chrome для тестирования вашего веб-сайта и оценки экономии, которую принесет AVIF .

WordPress — самая популярная платформа веб-сайтов в мире, и разработчикам доступен ряд плагинов для преобразования своих изображений в AVIF, например:

Для более опытных разработчиков такие инструменты, как ImageMagick и FFmpeg, станут хорошей отправной точкой.

Скорость кодирования AVIF

Высокая скорость кодирования и высокое качество изображения имеют решающее значение для масштабного сжатия изображений. Скорость кодирования программного обеспечения AVIF значительно улучшилась за последние два года. По сравнению с другими современными форматами неподвижных изображений, AVIF создает файлы меньшего размера с аналогичным визуальным качеством (см. следующий график: чем ниже, тем лучше), но при этом кодирует файлы .

Гистограмма, сравнивающая размеры файлов различных кодеков изображений в процентах от выходного сигнала TurboJPEG. AVIF самый низкий, затем JPEG XL, затем WebP и, наконец, MozJPEG.

На приведенной ниже диаграмме (чем выше, тем лучше) показано сравнение скорости кодирования AVIF со скоростью других форматов изображений. Кодеки предыдущего поколения, такие как WebP, выигрывают от менее сложных (но и менее эффективных) алгоритмов сжатия. Благодаря многопоточной схеме кодирования AVIF достигает аналогичной производительности для обычных случаев использования, обеспечивая при этом значительный выигрыш в сжатии.

Сравнение скорости кодирования кодеков изображений. Сравниваемыми кодировщиками являются средний AVIF, средний JPEG XL, средний WebP (один поток) и средний MozJPEG (один поток). AVIF, как правило, является одним из самых быстрых кодировщиков изображений с точки зрения наилучшего качества и усилий по умолчанию, но он является самым медленным из всех кодировщиков с точки зрения оперативной производительности.

Для разработчиков, заинтересованных в более подробном сравнении скорости кодирования и визуального качества, сайт Image Coding Comparisons содержит воспроизводимые результаты тестов.

Хотя программные реализации современных кодеков изображений, таких как AVIF и WebP, оптимизированы для архитектур процессоров x86 и ARM, сжатие огромных объемов изображений в больших масштабах может оказаться дорогостоящим с точки зрения вычислений. Одной из альтернатив снижения затрат на сжатие является использование аппаратного ускорения. Компания Bluedot разработала кодировщик Pulsar-AVIF с аппаратным ускорением, работающий на программируемых FPGA, таких как AMD Alveo U250. По сравнению с программным обеспечением avifenc, Pulsar-AVIF обеспечивает повышение скорости в 7–23 раза при аналогичной эффективности сжатия .

Кодер Время кодирования (мс) Кадров в секунду Загрузка процессора Спецификация оборудования
Пульсар-АВИФ
(ПЛИС)
60 409,85 305% AMD Alveo U250 1 шт. + Intel(R) Xeon(R)
Процессор Platinum 8171 с частотой 2,6 ГГц, 10 ядер
авифенк
(либаом)
405 59,26 3200% Процессор Intel(R) Xeon(R) Platinum 8370C по адресу
2,8 ГГц, 32 ядра
авифенк
(СВТ-АВ1)
1325 18.11 3200% Процессор Intel(R) Xeon(R) Platinum 8370C по адресу
2,8 ГГц, 32 ядра
Сравнение скорости кодирования AVIF
  • Тестовый набор: Kodak (24 изображения 768x512)
  • Кодирование 24 изображений одновременно (24 процесса)
  • Каждый процесс программного кодирования выполняется в 4 потока. (-j 4)


Разработчики могут развернуть кодировщик Pulsar-AVIF с помощью облачных виртуальных машин, таких как Azure NP-Series .

Функции AVIF для адаптивных веб-страниц

AVIF имеет несколько интересных функций, которые помогут создавать более отзывчивые веб-страницы. На этот раз мы немного углубимся в анимированные файлы AVIF, которые на сегодняшний день являются наиболее эффективным способом доставки классной анимации в Интернет.

Анимированный AVIF

Анимированный GIF по-прежнему остается популярным форматом анимированных изображений, несмотря на то, что ему уже 35 лет. Самыми большими недостатками анимированных GIF-файлов являются поддержка только 256 цветов и плохое сжатие, что приводит к очень большим размерам файлов, а также ограничивает разрешение или частоту кадров для практических случаев использования. Напротив, анимированное кодирование AVIF фактически совпадает со схемой кодирования видео AV1, которая обеспечивает значительную экономию размера файла по сравнению с анимированным GIF.

Мы провели простой тест, в котором закодировали набор анимированных GIF-файлов в форматы AVIF и JPEG XL. В тестовом наборе средний процент экономии размера файла составил примерно 86 % по сравнению с исходными файлами GIF и около 73 % по сравнению с анимированными файлами JPEG XL*.

Сравнение производительности кодеков анимированных изображений. AVIF превосходит GIF и JPEG XL как по среднему, так и по медианному размеру файла.
* Версии libavif и libjxl: версия libavif 4cff6a3 (версия libaom v3.5.0), версия libjxl 176b1c03. Тестовый набор: 15 примеров GIF-файлов из Википедии .

Chrome, Firefox и Safari поддерживают анимированное воспроизведение AVIF.

FFmpeg — это один из инструментов, который можно использовать для создания анимированных файлов AVIF. Вот базовый пример преобразования GIF в AVIF с помощью FFmpeg:

ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"

$CRF — желаемое качество вывода по шкале от 0 до 63 . Более низкие значения означают лучшее качество и больший размер файла. 0 использует сжатие без потерь . Начните со значения 23 для небольших анимированных файлов AVIF.

FFmpeg по умолчанию использует libaom для кодирования изображений AVIF, но также может использовать rav1e или SVT-AV1, если они доступны. Дополнительную информацию о выборе кодировщика и настройке параметров кодирования для достижения компромисса между скоростью и качеством можно найти в руководстве по кодированию AV1 от FFmpeg .

Другой вариант использования — переупаковка видео AV1 в AVIF без перекодирования исходного файла. Это значительно дешевле, чем декодирование/кодирование исходного файла AV1, и делает видео AV1 доступным для использования с элементом <img> . Это можно сделать, передав -c:v copy в FFmpeg.

ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"

Выводы

Использование AVIF в Интернете неуклонно растет с момента запуска и широко поддерживается браузерами, CDN изображений, плагинами WordPress и инструментами кодирования. В общем, AVIF — отличный выбор для размещения изображений в Интернете; AVIF быстро кодирует и декодирует, обеспечивая при этом наилучшее качество или наименьший размер файла, в зависимости от того, что вы предпочитаете для своего веб-сайта. AVIF — наиболее эффективный способ доставки анимации в Интернет. Если у вас есть вопросы, комментарии или пожелания по функциям, обращайтесь в список рассылки av1-discuss , сообщество AOM Github и вики-сайт AVIF .

Героическое изображение из Unsplash , автор Амаль С.