Замените GIF-файлы видео

Роб Додсон

В этой лабораторной работе повысьте производительность, заменив анимированный GIF-файл видео.

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

Сначала оцените эффективность веб-сайта:

  1. Для предварительного просмотра сайта нажмите View App . Затем нажмите Fullscreen полноэкранный .
  2. Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
  3. Нажмите на вкладку «Маяк» .
  4. Убедитесь, что в списке категорий установлен флажок «Производительность» .
  5. Нажмите кнопку «Сформировать отчет» .

Когда вы закончите, вы увидите, что Lighthouse отметил GIF как проблему в своем аудите «Использование видеоформатов для анимированного контента».

Получить FFmpeg

Существует несколько способов конвертировать GIF-файлы в видео; в этом руководстве используется FFmpeg . Он уже установлен в Glitch VM, и, если хотите, можете следовать этим инструкциям, чтобы установить его на локальном компьютере .

Откройте консоль.

Еще раз проверьте, что FFmpeg установлен и работает:

  1. Нажмите «Ремикс для редактирования», чтобы сделать проект редактируемым.
  2. Нажмите «Терминал» (примечание: если кнопка «Терминал» не отображается, возможно, вам придется использовать опцию «Полноэкранный режим»).
  3. В консоли выполните: 
which ffmpeg

Вы должны получить путь к файлу:

/usr/bin/ffmpeg

Изменить GIF на видео

  • В консоли запустите cd images , чтобы войти в каталог образов.
  • Запустите ls , чтобы увидеть содержимое.

Вы должны увидеть что-то вроде этого:

$ ls
cat-herd.gif
  • В консоли выполните: 
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Это говорит FFmpeg взять входные данные , обозначенные флагом -i , cat-herd.gif и преобразовать их в видео с именем cat-herd.mp4. Это должно занять секунду для выполнения. Когда команда завершится, вы сможете снова ввести ls и увидеть два файла:

$ ls
cat-herd.gif  cat-herd.mp4

Создавайте видео WebM

В то время как MP4 существует с 1999 года, WebM является относительным новичком, изначально выпущенным в 2010 году. Видео WebM могут быть намного меньше, чем видео MP4, поэтому имеет смысл генерировать оба. К счастью, элемент <video> позволит вам добавлять несколько источников, поэтому если браузер не поддерживает WebM, он может вернуться к MP4.

  • В консоли выполните: 
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Чтобы проверить размеры файлов, выполните: 
ls -lh

У вас должен быть один GIF и два видео:

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

Обратите внимание, что оригинальный GIF весит 3,7 МБ, тогда как версия MP4 весит 551 Кб, а версия WebM весит всего 341 Кб. Это огромная экономия!

Обновите HTML, чтобы воссоздать эффект GIF

Анимированные GIF-файлы обладают тремя ключевыми чертами, которые должны передаваться в видеороликах:

  • Они воспроизводятся автоматически.
  • Они зацикливаются непрерывно (обычно, но зацикливание можно предотвратить).
  • Они молчат.

К счастью, вы можете воссоздать это поведение с помощью элемента <video> .

  • В файле index.html замените строку с <img> на: 
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Элемент <video> , использующий эти атрибуты, будет воспроизводиться автоматически, бесконечно циклично, без звука и воспроизводиться в строке (то есть не на весь экран) — все поведение, ожидаемое от анимированных GIF-файлов! 🎉

Укажите ваши источники

Осталось только указать источники видео. Элемент <video> требует один или несколько дочерних элементов <source> , указывающих на различные видеофайлы, которые браузер может выбрать, в зависимости от поддержки формата. Обновите <video> элементами <source> , которые ссылаются на ваши видео cat-herd: 

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

Предварительный просмотр

  • Для предварительного просмотра сайта нажмите View App . Затем нажмите Fullscreen полноэкранный .

Опыт должен выглядеть так же. Пока все хорошо.

Проверить с помощью Lighthouse

При открытом рабочем сайте:

  1. Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
  2. Нажмите на вкладку «Маяк» .
  3. Убедитесь, что в списке категорий установлен флажок «Производительность» .
  4. Нажмите кнопку «Сформировать отчет» .

Вы должны увидеть, что аудит «Использование видеоформатов для анимированного контента» теперь проходит! Ура! 💪