Zastąp GIF-y filmem

Rob Dodson

W tym ćwiczeniu poprawisz wydajność, zastępując animowany GIF filmem.

Pomiar najpierw

Najpierw zmierz skuteczność witryny:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  3. Kliknij kartę Lighthouse.
  4. Na liście Kategorie sprawdź, czy zaznaczone jest pole Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.

Po zakończeniu procesu Lighthouse powinien zgłosić GIF jako problem w ramach audytu „Używanie formatów wideo do animowanych treści”.

Pobieranie FFmpeg

Istnieją różne sposoby konwertowania GIF-ów na filmy. W tym przewodniku użyjemy narzędzia FFmpeg. Jest ona już zainstalowana na maszynie wirtualnej Glitch. Jeśli chcesz, możesz też zainstalować ją na swoim lokalnym komputerze, postępując zgodnie z tymi instrukcjami.

Otwórz konsolę

Sprawdź, czy FFmpeg jest zainstalowany i działa:

  1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  2. Kliknij Terminal (uwaga: jeśli przycisk Terminal nie jest widoczny, być może trzeba będzie użyć opcji Pełny ekran).
  3. W konsoli wykonaj te czynności:
which ffmpeg

Powinieneś otrzymać ścieżkę do pliku:

/usr/bin/ffmpeg

Konwertowanie GIF-a na film

  • W konsoli uruchom cd images, aby przejść do katalogu images.
  • Uruchom ls, aby wyświetlić zawartość.

Powinien pojawić się ekran podobny do tego:

$ ls
cat-herd.gif
  • W konsoli wykonaj te czynności:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Polecenie to informuje FFmpeg, aby wejściowe dane (oznaczone flagą -i) z pliku cat-herd.gif przekonwertować na film o nazwie cat-herd.mp4. Wykonanie tego polecenia powinno zająć sekundę. Po zakończeniu wykonywania polecenia możesz ponownie wpisać ls i zobaczyć 2 pliki:

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

Tworzenie filmów WebM

Format MP4 istnieje od 1999 r., a WebM jest stosunkowo nowym formatem, który został po raz pierwszy udostępniony w 2010 r. Pliki wideo WebM mogą być znacznie mniejsze niż pliki MP4, więc warto wygenerować oba formaty. Na szczęście element <video> pozwala dodawać wiele źródeł, więc jeśli przeglądarka nie obsługuje formatu WebM, może użyć formatu MP4.

  • W konsoli wykonaj te czynności:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Aby sprawdzić rozmiary plików, uruchom:
ls -lh

Powinieneś mieć 1 GIF-a i 2 filmy:

$ 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

Zwróć uwagę, że oryginalny GIF ma rozmiar 3,7 M, wersja MP4 – 551 K, a wersja WebM – tylko 341 K. To ogromna oszczędność!

Zaktualizuj kod HTML, aby odtworzyć efekt GIF

Animowane GIF-y mają 3 kluczowe cechy, które muszą być odzwierciedlone w filmach:

  • są odtwarzane automatycznie;
  • Zazwyczaj są one odtwarzane w pętli (chociaż można temu zapobiec).
  • Są wyciszone.

Na szczęście możesz odtworzyć te zachowania za pomocą elementu <video>.

  • W pliku index.html zastąp wiersz z elementem <img> tym:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Element <video> korzystający z tych atrybutów będzie odtwarzany automatycznie w nieskończoność bez dźwięku i wbudowany (czyli nie na pełnym ekranie). 🎉

Określ źródła

Teraz wystarczy określić źródła filmów. Element <video> wymaga co najmniej jednego elementu podrzędnego <source> wskazującego różne pliki wideo, spośród których przeglądarka może wybrać, w zależności od obsługi formatu. Zaktualizuj element <video> elementami <source>, które prowadzą do filmów o kotach:

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

Podgląd

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.

Użytkownik powinien mieć takie samo wrażenie. Idzie Ci dobrze.

Weryfikacja za pomocą Lighthouse

Gdy otwarta jest witryna na żywo:

  1. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  2. Kliknij kartę Lighthouse.
  3. Na liście Kategorie sprawdź, czy zaznaczone jest pole Skuteczność.
  4. Kliknij przycisk Wygeneruj raport.

Powinieneś/powinnaś zobaczyć, że audyt „Używanie formatów wideo do animowanych treści” jest teraz pozytywny. Super! 💪