Показ изображений в формате AVIF

1. Введение

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

Что такое AVIF?

AVIF – это графический формат, полученный из битового потока видео AV1. AVIF был разработан для эффективного сжатия.

Почему AVIF?

Изображения AVIF намного меньше, чем изображения JPEG, PNG, GIF или WebP того же или лучшего качества.

Что вы узнаете

• Как создать изображения в формате AVIF из ваших изображений
• Как отображать изображения AVIF на веб-странице

Что вам понадобится

• Любой основной браузер.
• текстовый редактор;
• cmake
• git
• ниндзя
• Изображение. Я предоставил один из них по этой ссылке.
• FFmpeg

2. Как создавать изображения AVIF с помощью Squoosh

Squoosh – это веб-приложение для сжатия изображений, которое может преобразовывать изображения в формат AVIF.

1. Откройте Squoosh.
2. Перетащите локальное изображение в Squoosh.

3. В раскрывающемся списке Compress (Сжать) выберите AVIF.

Squoosh сожмет изображение в формат AVIF. Когда Squoosh закончит, в правом нижнем углу появится кнопка скачивания и статистика по изображению AVIF.

Размер исходного изображения составлял 3340 КБ, а сжатого – 378 КБ. Размер образца почти в 10 раз меньше исходного изображения!

4. Скачать изображение в формате AVIF

Нажмите кнопку скачивания, и изображение в формате AVIF будет сохранено на локальном диске.

Чтобы посмотреть изображение AVIF, перетащите его в Chrome.

Теперь у вас есть собственное изображение AVIF!

3. Как создать кодировщик командной строки avifenc

avifenc – это приложение командной строки, которое может преобразовывать изображения PNG и JPEG в изображения AVIF. avifenc использует libavif – библиотеку, которая может декодировать и кодировать изображения AVIF. Если вам нужно преобразовать в AVIF много изображений, рекомендуем использовать кодировщик командной строки avifenc.

Chrome использует libavif для отрисовки изображений в формате AVIF.

1. Получите код.

git clone https://github.com/AOMediaCodec/libavif.git

2. Перейдите в каталог libavif.

cd libavif/

Существует множество способов настроить avifenc и libavif для сборки. Дополнительную информацию можно найти на сайте libavif. Мы собираемся создать avifenc так, чтобы он был статически связан с кодировщиком libaom, декодировщиком dav1d и библиотеками обработки libyuv.

libyuv – библиотека, которая позволяет ускорить преобразование цветов.

3. Создайте инструмент кодирования командной строки avifenc.

Рекомендуем создать каталог сборки для avifenc.

mkdir build

Перейдите в каталог сборки.

cd build

Создайте файлы сборки для avifenc.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Скомпилируйте avifenc.

make

Вы успешно собрали avifenc!

4. Как создавать изображения в формате AVIF с помощью avifenc

1. Создайте изображение AVIF с настройками по умолчанию.

Основные параметры, которые нужно задать для avifenc, – это входной и выходной файлы.

./avifenc happy_dog.jpg example.avif

Теперь у вас есть второе изображение в формате AVIF.

2. Изменение качества кодирования AVIF.

Обычно единственный параметр, который может потребоваться изменить при кодировании AVIF, – это quality. quality – параметр, который позволяет найти баланс между качеством сжатого изображения и размером файла. Например, файл высокого качества (-q 90) будет намного больше, чем файл низкого качества (-q 20), но и выглядеть он будет намного лучше.

У avifenc много параметров, которые влияют на качество и скорость. Чтобы посмотреть доступные варианты и узнать о них больше, выполните команду ./avifenc

5. Отрисовка изображений AVIF на веб-странице.

Теперь покажите миру, как вы потрудились.

1. Создайте веб-страницу для показа изображения в формате AVIF.

Создайте файл с названием avif_example.html.

Откройте файл avif_example.html в текстовом редакторе и введите следующий код:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif">
      <img src="happy_dog.jpg">
    </picture>
  </body>
</html>

Скопируйте исходный файл (в моем случае happy_dog.jpg) и файл AVIF (example.avif) в тот же каталог, где находится avif_example.html.

Мы используем элемент picture для отрисовки изображения AVIF, если браузер поддерживает этот формат, и JPEG, если не поддерживает. Подробнее об элементе picture…

2. Откройте веб-страницу в Chrome.

Один из способов открыть HTML-файл – перетащить avif_example.html в Chrome. Вы также можете открыть HTML-файл, разместив его на HTTP-сервере и указав в браузере путь avif_example.html.

Теперь изображение AVIF должно отображаться в Chrome. Чтобы проверить это, нажмите на изображение правой кнопкой мыши и выберите Save image as.... Откроется диалоговое окно с example.avif. Вы также можете открыть инструменты разработчика в Chrome и проверить, скачивается ли файл example.avif.

6. Как создавать анимированные изображения AVIF с помощью FFmpeg

Установка FFmpeg в вашей системе выходит за рамки этой практической работы. Подробную информацию о том, как установить FFmpeg, можно найти в документации FFmpeg.

Если у вас нет исходного медиафайла, вы можете использовать файл ice_qcif_15fps.y4m. Файл взят из Xiph.org Video Test Media.

Файлы Y4M не сжаты, поэтому могут быть очень большими.

1. Создайте анимированное изображение AVIF.

Чтобы создать анимированное изображение AVIF из файла y4m, выполните следующую команду:

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Теперь у вас есть собственное анимированное изображение в формате AVIF.

2. Отобразить анимированное изображение AVIF на веб-странице.

Создайте файл с названием avif_animated_example.html.

Если у вас нет исходного медиафайла, вы можете использовать этот GIF-файл: ice_qcif_15fps.gif.

Откройте файл avif_animated_example.html в текстовом редакторе и введите следующий код:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif">
      <img src="ice_qcif_15fps.gif">
    </picture>
  </body>
</html>

Скопируйте исходный файл (в примере выше – ice_qcif_15fps.gif) и файл AVIF (animated.avif) в тот же каталог, где находится avif_animated_example.html.

3. Откройте веб-страницу в Chrome.

Один из способов открыть HTML-файл – перетащить avif_animated_example.html в Chrome. Вы также можете открыть HTML-файл, разместив его на HTTP-сервере и указав в браузере путь avif_animated_example.html.

Теперь анимированное изображение AVIF должно отображаться в Chrome.

Если вы используете предоставленные образцы медиаконтента, то должны увидеть примерно следующее:

Чтобы убедиться, что это анимированное изображение AVIF, нажмите на него правой кнопкой мыши и выберите Save image as.... Откроется диалоговое окно с animated.avif. Вы также можете открыть инструменты разработчика в Chrome и проверить, скачивается ли файл animated.avif.

7. Как создавать анимированные изображения AVIF с помощью avifenc

1. Преобразуйте исходный медиаконтент в формат Y4M.

avifenc поддерживает формат y4m в качестве входного для создания анимированных изображений AVIF. Для создания файлов Y4M отлично подходит FFmpeg.

Файлы Y4m не сжимаются, поэтому могут быть очень большими.

ffmpeg -i input.gif -pix_fmt yuvj444p -f yuv4mpegpipe output.y4m

2. Создайте анимированное изображение AVIF.

Если у вас нет исходного медиафайла, вы можете использовать созданный нами файл y4m: ice_qcif_15fps.y4m. Файл взят с сайта Xiph.org Video Test Media.

Чтобы создать анимированное изображение AVIF из файла y4m, выполните следующую команду:

./avifenc ice_qcif_15fps.y4m animated.avif

Теперь у вас есть собственное анимированное изображение в формате AVIF.

3. Отрисовать анимированное изображение AVIF на веб-странице.

Создайте файл с названием avif_animated_example.html.

Если у вас нет исходного медиафайла, вы можете использовать созданный нами GIF-файл ice_qcif_15fps.gif.

Откройте файл avif_animated_example.html в текстовом редакторе и введите следующий код:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif">
      <img src="ice_qcif_15fps.gif">
    </picture>
  </body>
</html>

Скопируйте исходный файл (в примере выше – ice_qcif_15fps.gif) и файл AVIF (animated.avif) в тот же каталог, где находится avif_animated_example.html.

4. Откройте веб-страницу в Chrome.

Один из способов открыть HTML-файл – перетащить avif_animated_example.html в Chrome. Вы также можете открыть HTML-файл, разместив его на HTTP-сервере и указав в браузере путь avif_animated_example.html.

Теперь анимированное изображение AVIF должно отображаться в Chrome.

Если вы используете предоставленные образцы медиаконтента, то должны увидеть следующее:

но с гораздо лучшим качеством.

Чтобы проверить, является ли изображение анимированным файлом AVIF, нажмите на него правой кнопкой мыши и выберите Save image as.... Откроется диалоговое окно с animated.avif. Вы также можете открыть инструменты разработчика в Chrome и убедиться, что файл animated.avif скачан.

5. Изменение качества кодирования AVIF.

Файл ice_qcif_15fps.gif примерно в семь раз больше и имеет гораздо худшее качество. Вы можете изменить качество AVIF, чтобы оно примерно соответствовало качеству ice_qcif_15fps.gif, изменив параметр качества на 20.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Теперь анимированный файл AVIF и ice_qcif_15fps.gif имеют примерно одинаковое качество, но файл GIF примерно в 22 раза больше.

8. Поздравляем!

Вы завершили практическое занятие по показу изображений в формате AVIF.

Надеемся, теперь вам понятно, как формат AVIF помогает уменьшить размер изображений и повысить эффективность их передачи через интернет. Подробнее о возможностях AVIF можно узнать из статьи Джейка Арчибальда (Jake Archibald).