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

1. Введение

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

Что такое AVIF?

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

Почему AVIF?

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

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

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

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

• Любой популярный браузер.
• Текстовый редактор
• cmake
• git
• ниндзя
• Изображение. Я предоставил одно здесь.
• 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 таким образом, чтобы он был статически связан с библиотеками кодировщика 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-файл ( eaxmple.avif ) в ту же директорию, что и avif_example.html .

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

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

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

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

6. Создание анимированных AVIF-изображений с помощью FFmpeg

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

Я создал для вас файл y4m на случай, если у вас нет исходного медиафайла: 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. Другой вариант — запустить avif_animated_example.html с HTTP-сервера.

Теперь ваше анимированное 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. Другой вариант — запустить avif_animated_example.html с HTTP-сервера.

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

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

За исключением анимированного AVIF-файла, качество намного лучше.

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

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

Файл ice_qcif_15fps.gif примерно в 7 раз больше по размеру и имеет гораздо худшее качество. Вы можете изменить качество 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 вы можете найти в замечательной статье Джейка Арчибальда.