В разделе «Возможности» отчета 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-файла на сервис, который позволит встроить его в видео.