Обновленная информация о том, как AVIF был принят в экосистеме.
AVIF – это новый графический формат, который быстро набирает популярность в интернете благодаря высокой степени сжатия, эффективной работе и широкому распространению. AVIF – это открытый графический формат, не требующий уплаты роялти, основанный на видеокодеке AV1, стандартизированном Alliance for Open Media. В этой записи блога мы расскажем, как AVIF используется в экосистеме и какие преимущества в плане производительности и качества он может дать разработчикам при работе со статичными изображениями и анимацией.
Что нового в экосистеме AVIF?
С момента появления AVIF в Chrome, Firefox и Safari использование AVIF в Интернете неуклонно растет; почти все браузеры сегодня поддерживают AVIF.
Только в Chrome использование AVIF выросло примерно до одного процента чуть более чем за год после того, как Chrome добавил поддержку AVIF в стабильную версию.
Ряд сетей доставки контента, таких как Akamai, Cloudflare, Cloudinary и Imgix, уже поддерживают показ изображений в формате AVIF. В записи блога, в которой объявляется о поддержке AVIF, Imgix сообщает об уменьшении размера файла на 60% по сравнению с JPEG и на 35% по сравнению с WebP. Это позволяет не только экономить место в хранилище, но и ускорять загрузку страниц, что положительно сказывается на показателе Largest Contentful Paint (LCP). LCP – это один из Core Web Vitals, который отражает, насколько быстро загружается самый крупный блок контента на странице. Использование современных кодеков для сжатия изображений – один из основных способов уменьшить LCP. Lighthouse – это отличный инструмент разработчика в Chrome, который позволяет протестировать сайт и узнать, насколько AVIF поможет сэкономить трафик.
WordPress – самая популярная платформа для создания сайтов в мире. Для нее доступно множество плагинов, позволяющих разработчикам преобразовывать изображения в формат AVIF, например:
Если вы предпочитаете работать вручную, то можете использовать такие инструменты, как ImageMagick и FFmpeg.
Скорость кодирования AVIF
Высокая скорость кодирования и качество изображения критически важны для масштабного сжатия изображений. За последние два года скорость программного кодирования AVIF значительно выросла. По сравнению с другими современными графическими форматами AVIF создает файлы меньшего размера с аналогичным визуальным качеством (см. следующий график, чем ниже, тем лучше), но также быстрее кодируется .
На диаграмме ниже показано, как скорость кодирования AVIF соотносится с другими графическими форматами (чем выше, тем лучше). Кодеки предыдущего поколения, такие как WebP, используют менее сложные (но и менее эффективные) алгоритмы сжатия. Благодаря многопоточному кодированию AVIF обеспечивает аналогичную производительность для распространенных вариантов использования, обеспечивая при этом значительное повышение степени сжатия.
Разработчики, которых интересует более подробное сравнение скорости кодирования и качества изображения, могут найти воспроизводимые результаты тестов на сайте Image Coding Comparisons.
Хотя программные реализации современных графических кодеков, таких как AVIF и WebP, оптимизированы для архитектур процессоров x86 и ARM, сжатие больших объемов изображений в масштабе может быть дорогостоящим с точки зрения вычислений. Чтобы снизить затраты на сжатие, можно использовать аппаратное ускорение. Компания Bluedot разработала кодировщик Pulsar-AVIF с аппаратным ускорением, который работает на программируемых вентильных матрицах, таких как AMD Alveo U250. По сравнению с программным кодировщиком avifenc Pulsar-AVIF работает в 7–23 раза быстрее при схожей эффективности сжатия.
- Тестовый набор: Kodak (24 изображения размером 768 x 512)
- Одновременное кодирование 24 изображений (24 процесса)
- Каждый процесс кодирования ПО выполняется в четыре потока. (-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*.
Chrome, Firefox и Safari поддерживают воспроизведение анимированных AVIF-файлов.
FFmpeg – один из инструментов, который можно использовать для создания анимированных файлов AVIF. Ниже приведен простой пример преобразования GIF в AVIF с помощью FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF – желаемое качество выходного файла по шкале от 0 до 63. Чем меньше значение, тем выше качество и больше размер файла. 0 использует сжатие без потерь. Для небольших анимированных файлов AVIF начните со значения 23.
По умолчанию FFmpeg использует libaom для кодирования изображений AVIF, но также может использовать rav1e или SVT-AV1, если они доступны. Дополнительную информацию о выборе кодировщика и настройке параметров кодирования для достижения оптимального соотношения скорости и качества можно найти в руководстве по кодированию AV1 в FFmpeg.
Ещё один вариант использования – перепаковка видео AV1 в AVIF без перекодирования исходного файла. Это значительно дешевле, чем декодирование/кодирование исходного файла AV1, и делает видео AV1 доступным для использования с элементом <img>. Для этого можно передать в FFmpeg параметр -c:v copy.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Выводы
С момента запуска AVIF его использование в интернете неуклонно растет. Он широко поддерживается браузерами, сетями доставки контента для изображений, плагинами WordPress и инструментами кодирования. В целом AVIF – это отличный выбор для показа изображений в интернете. Он обеспечивает быстрое кодирование и декодирование, а также высокое качество или небольшой размер файла – в зависимости от того, что вы предпочитаете для своего сайта. AVIF – самый эффективный способ показа анимации в интернете. Если у вас есть вопросы, комментарии или запросы на добавление функций, свяжитесь с нами через список рассылки av1-discuss, сообщество AOM на GitHub или AVIF wiki.