Обновленная информация о том, как AVIF был принят в экосистеме.
AVIF — это новый формат изображений, который быстро завоевывает популярность в Интернете благодаря высокой степени сжатия, эффективной производительности и широкому распространению. AVIF — это открытый формат изображений, не требующий лицензионных отчислений, основанный на видеокодеке AV1, стандартизированном Альянсом открытых медиа. В этом сообщении блога будет представлен обзор того, как AVIF применяется в экосистеме, а также каких преимуществ в производительности и качестве разработчики могут ожидать от AVIF для неподвижных изображений и анимации.
Что нового в экосистеме AVIF?
С момента появления AVIF в Chrome, Firefox и Safari использование AVIF в Интернете неуклонно растет; сегодня почти все браузеры поддерживают AVIF.
Только в Chrome использование AVIF выросло примерно до одного процента чуть больше чем за год после того, как Chrome добавил поддержку AVIF в стабильной версии.
Ряд CDN изображений, таких как Akamai , Cloudflare , Cloudinary и Imgix, сегодня обслуживают изображения AVIF. В сообщении в блоге , объявляющем о поддержке AVIF, Imgix сообщил об экономии размера файла на 60 % по сравнению с JPEG и на 35 % по сравнению с WebP. Такая экономия размера файла приводит к значительной экономии места, а также помогает страницам загружаться быстрее, сокращая время наибольшей отрисовки контента (LCP) . LCP — это один из основных веб-показателей , который показывает, насколько быстро загрузился самый большой блок контента на странице. Использование современных кодеков для сжатия изображений — один из ключевых методов уменьшения LCP. Lighthouse — отличный инструмент разработчика Chrome для тестирования вашего веб-сайта и оценки экономии, которую принесет AVIF .
WordPress — самая популярная платформа веб-сайтов в мире, и разработчикам доступен ряд плагинов для преобразования своих изображений в AVIF, например:
- Автооптимизация
- Конвертировано для СМИ
- EWWW Оптимизатор изображения
- Оптимол
- Оптимизатор изображения ShortPixel
Для более опытных разработчиков такие инструменты, как ImageMagick и FFmpeg , станут хорошей отправной точкой.
Скорость кодирования AVIF
Высокая скорость кодирования и высокое качество изображения имеют решающее значение для масштабного сжатия изображений. Скорость кодирования программного обеспечения AVIF значительно улучшилась за последние два года. По сравнению с другими современными форматами неподвижных изображений, AVIF создает файлы меньшего размера с аналогичным визуальным качеством (см. следующий график: чем ниже, тем лучше), но при этом кодирует файлы .
На приведенной ниже диаграмме (чем выше, тем лучше) показано сравнение скорости кодирования AVIF со скоростью других форматов изображений. Кодеки предыдущего поколения, такие как WebP, выигрывают от менее сложных (но и менее эффективных) алгоритмов сжатия. Благодаря многопоточной схеме кодирования AVIF достигает аналогичной производительности для обычных случаев использования, обеспечивая при этом значительный выигрыш в сжатии.
Для разработчиков, заинтересованных в более подробном сравнении скорости кодирования и визуального качества, сайт Image Coding Comparisons содержит воспроизводимые результаты тестов.
Хотя программные реализации современных кодеков изображений, таких как AVIF и WebP, оптимизированы для архитектур процессоров x86 и ARM, сжатие огромных объемов изображений в больших масштабах может оказаться дорогостоящим с точки зрения вычислений. Одной из альтернатив снижения затрат на сжатие является использование аппаратного ускорения. Компания Bluedot разработала кодировщик Pulsar-AVIF с аппаратным ускорением, работающий на программируемых FPGA, таких как AMD Alveo U250. По сравнению с программным обеспечением avifenc, Pulsar-AVIF обеспечивает повышение скорости в 7–23 раза при аналогичной эффективности сжатия .
- Тестовый набор: 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*.
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 .