Вы когда-нибудь видели анимированный GIF на таких сервисах, как Imgur или Gfycat, просматривали его в инструментах разработчика и обнаруживали, что на самом деле это видео? На это есть веская причина. Анимированные GIF-файлы могут быть невероятно большими .
К счастью, это одна из тех областей, где при оптимизации скорости загрузки можно добиться огромных результатов, приложив сравнительно немного усилий! Преобразовав большие GIF-файлы в видео, можно значительно сэкономить трафик пользователей .
Сначала проведите замеры.
Используйте Lighthouse для проверки вашего сайта на наличие GIF-файлов, которые можно преобразовать в видео. В инструментах разработчика перейдите на вкладку «Аудит» и установите флажок «Производительность». Затем запустите 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 работает только с файлами, имеющими четные размеры, например, 320x240 пикселей. Если входной 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 сайта.