Используйте видеоформаты для анимированного контента

В разделе «Возможности» вашего отчета Lighthouse перечислены все анимированные GIF-файлы, а также предполагаемая экономия в секундах, достигнутая за счет преобразования этих GIF-файлов в видео:

Скриншот Маяка Используйте видеоформаты для аудита анимационного контента

Почему стоит заменить анимированные GIF-файлы видео

Большие GIF-файлы неэффективны для доставки анимированного контента. Преобразуя большие GIF-файлы в видео, вы можете существенно сэкономить на пропускной способности пользователей. Рассмотрите возможность использования видео MPEG4/WebM для анимации и PNG/WebP для статических изображений вместо GIF, чтобы сэкономить сетевые байты.

Создавайте видео в формате MPEG

Существует несколько способов конвертировать GIF-файлы в видео. FFmpeg — это инструмент, используемый в этом руководстве. Чтобы использовать FFmpeg для преобразования GIF-файла my-animation.gif в видео MP4, выполните в консоли следующую команду:

ffmpeg -i my-animation.gif my-animation.mp4

Это говорит FFmpeg принять my-animation.gif в качестве входных данных, обозначенных флагом -i , и преобразовать его в видео с именем my-animation.mp4 .

Создание видеороликов WebM

Видео WebM намного меньше, чем видео MP4, но не все браузеры поддерживают WebM, поэтому имеет смысл создавать оба.

Чтобы использовать FFmpeg для преобразования my-animation.gif в видео WebM, выполните в консоли следующую команду:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Замените GIF-изображение видео.

Анимированные GIF-файлы обладают тремя ключевыми характеристиками, которые видео должно воспроизводить:

  • Они играют автоматически.
  • Они зацикливаются непрерывно (обычно, но можно предотвратить зацикливание).
  • Они молчат.

К счастью, вы можете воссоздать это поведение с помощью элемента <video> .

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm" />
  <source src="my-animation.mp4" type="video/mp4" />
</video>

Используйте сервис, который конвертирует GIF-файлы в видео HTML5.

Многие CDN изображений поддерживают преобразование видео GIF в HTML5. Вы загружаете GIF в CDN изображений, а CDN изображений возвращает видео HTML5.

Рекомендации для конкретного стека

AMP

Для анимированного контента используйте amp-anim , чтобы минимизировать загрузку ЦП, когда контент находится за кадром.

Ресурсы