Эта страница переведена с помощью Cloud Translation API.

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

1. Введение

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

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

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

Почему АВИФ?

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

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

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

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

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

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

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

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

Сквош скриншот

Выберите AVIF в раскрывающемся списке «Сжать».

Раскрывающийся список Squosh

Затем Squoosh сожмет ваше изображение в изображение AVIF. Как только Squoosh закончит, в правом нижнем углу появится кнопка загрузки с некоторой статистикой изображения AVIF.

Кнопка загрузки

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

Загрузите изображение AVIF

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

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

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

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

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

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

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

cd libavif/

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

Создайте инструмент кодирования командной строки 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 ../

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

make

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

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

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

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

./avifenc happy_dog.jpg example.avif

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

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

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

5. Рендеринг изображений AVIF на веб-странице.

Теперь давайте покажем миру всю вашу тяжелую работу.

Создайте веб-страницу для размещения вашего изображения 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 вы можете узнать здесь .

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

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

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

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

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

Запустите эту команду, чтобы создать анимированное изображение AVIF из файла y4m.

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

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

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

Откройте 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 .

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

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

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

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

Анимированный каток

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

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

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

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

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

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

Запустите эту команду, чтобы создать анимированное изображение AVIF из файла y4m.

./avifenc ice_qcif_15fps.y4m animated.avif

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

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

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

Откройте 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>

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

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

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

Анимированный каток

Изменение качества кодирования 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 в замечательном посте Джейка Арчибальда.