Обслуживание изображений AVIF

1. Введение

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

Что такое АВИФ?

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

Почему АВИФ?

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

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

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

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

• Chrome версии 85 или новее
• Текстовый редактор
• cmake
• мерзавец
• ниндзя
• Изображение. Я предоставил один здесь
• FFmpeg

2. Создание изображений AVIF с помощью Squoosh

Squoosh — веб-приложение для сжатия изображений. С помощью Squoosh вы можете легко сжимать изображения в изображения AVIF.

1. Откройте https://squoosh.app.
2. Перетащите локальное изображение на Squoosh.

3. Выберите 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 так, чтобы он был статически связан с библиотекой кодировщика и декодера av1, libaom .

3. Получите и постройте либаом.

Перейдите в каталог расширений libavif.

cd ext

Следующая команда извлечет исходный код libaom и соберет libaom статически.

./aom.cmd

Смените каталог на libavif.

cd ../

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

Хорошей идеей будет создать каталог сборки для avifenc.

mkdir build

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

cd build

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

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Постройте авифенк.

make

Вы успешно создали avifenc!

4. Создание изображений AVIF с помощью avifenc

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

Самыми основными параметрами работы avifenc являются настройки входных и выходных файлов.

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

«–min 0 –max 63 -a end-usage=q -a cq-level=32 -a Tune=ssim -a deltaq-mode=3 -a Sharpness=3 -y 420» — рекомендуемые настройки для изображений AVIF.

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

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

2. Ускорение кодировщика.

Одним из параметров, который может быть полезно изменить в зависимости от количества ядер на вашем компьютере, является параметр --jobs . Этот параметр определяет, сколько потоков avifenc будет использовать для создания изображений AVIF. Попробуйте запустить эту командную строку.

./avifenc happy_dog.jpg example.avif --jobs 8

Это указывает avifenc использовать 8 потоков при создании изображения AVIF. На моей машине это ускоряет кодирование AVIF в 5 раз.

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 ( eaxmple.avif ) в тот же каталог, что и avif_example.html .

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

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

Один из способов открыть файл html — перетащить avif_example.html в Chrome. Другой вариант открытия html-файла — это передача файла avif_example.html с HTTP-сервера.

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

6. Создание анимированных изображений AVIF

1. Конвертируйте исходный медиафайл в формат y4m.

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

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

ffmpeg -i input.gif -pix_fmt yuv420p -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 .

Обратите внимание, что GIF-файл примерно в 35 раз больше и гораздо хуже по качеству.

Откройте 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-файла — это передача файла avif_animated_example.html с HTTP-сервера.

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

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

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

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

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

Вы завершили лабораторную работу по коду показа изображений AVIF!

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