В разделе «Возможности» вашего отчета 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 , чтобы минимизировать загрузку ЦП, когда контент находится за кадром.
Друпал
Рассмотрите возможность загрузки вашего GIF-файла в сервис, который сделает его доступным для встраивания в виде видео.