Вы когда-нибудь видели анимированный GIF-файл на таком сервисе, как Imgur или Gfycat, проверяли его в своих инструментах разработки только для того, чтобы обнаружить, что GIF на самом деле является видео? Для этого есть веская причина. Анимированные GIF-файлы могут быть просто огромными .
К счастью, это одна из тех областей производительности загрузки, где вы можете проделать относительно небольшую работу, чтобы получить огромную выгоду! Преобразуя большие GIF-файлы в видео, вы можете существенно сэкономить на пропускной способности пользователей .
Сначала измерьте
Используйте Lighthouse, чтобы проверить свой сайт на наличие GIF-файлов, которые можно преобразовать в видео. В DevTools перейдите на вкладку «Аудит» и установите флажок «Производительность». Затем запустите Lighthouse и проверьте отчет. Если у вас есть GIF-файлы, которые можно конвертировать, вы должны увидеть предложение «Использовать видеоформаты для анимированного контента»:
Создавайте видео в формате MPEG
Существует несколько способов конвертировать GIF-файлы в видео. В этом руководстве используется инструмент FFmpeg . Чтобы использовать FFmpeg для преобразования GIF-файла my-animation.gif в видео MP4, выполните в консоли следующую команду:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Это говорит FFmpeg принять my-animation.gif в качестве входных данных , обозначенных флагом -i , и преобразовать его в видео с именем my-animation.mp4 .
Кодировщик libx264 работает только с файлами четных размеров, например 320 на 240 пикселей. Если входной GIF имеет нечетные размеры, вы можете включить фильтр обрезки, чтобы FFmpeg не выдавал ошибку «высота/ширина, не делящаяся на 2»:
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Создание видеороликов WebM
Хотя MP4 существует с 1999 года, WebM — это относительно новый формат файлов, первоначально выпущенный в 2010 году. Видео 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 составляет 3,7 МБ по сравнению с версией MP4, которая составляет 551 КБ, и версией WebM, которая составляет всего 341 КБ!
Замените GIF-изображение на видео.
Анимированные GIF-файлы обладают тремя ключевыми характеристиками, которые видео должно воспроизводить:
- Они играют автоматически.
- Они зацикливаются непрерывно (обычно, но можно предотвратить зацикливание).
- Они молчат.
К счастью, вы можете воссоздать это поведение с помощью элемента <video> .
<video autoplay loop muted playsinline></video>
Элемент <video> с этими атрибутами воспроизводится автоматически, бесконечно зацикливается, не воспроизводит звук и воспроизводится в текстовом режиме (то есть не в полноэкранном режиме) — все это характерное поведение, ожидаемое от анимированных GIF-файлов! 🎉
Наконец, для элемента <video> требуется один или несколько дочерних элементов <source> указывающих на различные видеофайлы, которые браузер может выбирать, в зависимости от поддерживаемого браузером формата. Предоставьте как WebM, так и MP4, чтобы, если браузер не поддерживает WebM, он мог вернуться к MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Влияние на наибольшую содержательную отрисовку (LCP)
Следует отметить, что хотя элементы <img> являются кандидатами на LCP, элементы <video> без poster не являются кандидатами на LCP . Решением в случае эмуляции анимированных GIF-файлов является не добавление атрибута poster к элементам <video> , поскольку это изображение останется неиспользованным.
Что это значит для вашего сайта? Рекомендуется придерживаться использования <video> вместо анимированного GIF-файла, но с пониманием того, что такой носитель не будет кандидатом на LCP, и вместо него будет использоваться следующий по величине кандидат. Поскольку GIF-файлы и <video> обычно больше по размеру и поэтому загружаются медленнее, переход к другому кандидату LCP, скорее всего, даже улучшит LCP сайта.