Замените анимированные GIF-файлы видео для более быстрой загрузки страниц.

Вы когда-нибудь видели анимированный GIF-файл на таком сервисе, как Imgur или Gfycat, проверяли его в своих инструментах разработки только для того, чтобы обнаружить, что GIF на самом деле является видео? Для этого есть веская причина. Анимированные GIF-файлы могут быть просто огромными .

Сетевая панель DevTools, показывающая GIF-файл размером 13,7 МБ.

К счастью, это одна из тех областей производительности загрузки, где вы можете проделать относительно небольшую работу, чтобы получить огромную выгоду! Преобразуя большие GIF-файлы в видео, вы можете существенно сэкономить на пропускной способности пользователей .

Сначала измерьте

Используйте Lighthouse, чтобы проверить свой сайт на наличие GIF-файлов, которые можно преобразовать в видео. В DevTools перейдите на вкладку «Аудит» и установите флажок «Производительность». Затем запустите Lighthouse и проверьте отчет. Если у вас есть GIF-файлы, которые можно конвертировать, вы должны увидеть предложение «Использовать видеоформаты для анимированного контента»:

Неудачный аудит Lighthouse, используйте видеоформаты для анимированного контента.

Создавайте видео в формате 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 и видео может быть весьма значительной.

Сравнение размеров файлов показывает 3,7 МБ для GIF, 551 КБ для mp4 и 341 КБ для WebM.

В этом примере исходный 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 сайта.