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 ekranpełny ekran.
  2. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  3. Kliknij kartę Lighthouse.
  4. Na liście Kategorie sprawdź, czy zaznaczone jest pole wyboru Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.

Gdy skończysz, w audycie „Użyj formatów wideo w treściach animowanych” Lighthouse powinno się znaleźć informację o tym, że GIF został oznaczony jako problem.

Pobieranie FFmpeg

GIF-y można konwertować na filmy na kilka sposobów. W tym przewodniku używamy FFmpeg. Jest on już zainstalowany w maszynie wirtualnej Glitch. Jeśli chcesz, możesz również wykonać te instrukcje, aby zainstalować go na komputerze lokalnym.

Otwórz konsolę

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

  1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
  2. Kliknij Terminal (uwaga: jeśli nie widzisz przycisku terminala, włącz pełny ekran).
  3. W konsoli wykonaj te czynności:
which ffmpeg

Powinna Ci się zwrócić ścieżka do pliku:

/usr/bin/ffmpeg

Zmień GIF na film

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

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 instruuje FFmpeg, aby wejściowe dane (oznaczone flagą -i) z pliku cat-herd.gif przekonwertowało na film o nazwie cat-herd.mp4. Może to potrwać kilka sekund. Po zakończeniu wykonywania polecenia możesz ponownie wpisać lsi 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 uruchom polecenie:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Aby sprawdzić rozmiar uruchomionych plików:
ls -lh

Przygotuj jeden GIF 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

Warto zauważyć, że oryginalny plik GIF ma 3,7 MB, podczas gdy wersja MP4 to 551 KB, a wersja WebM – tylko 341 KB. To ogromna oszczędność!

Zaktualizuj kod HTML, aby odtworzyć efekt GIF-a

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

  • Są one odtwarzane automatycznie.
  • Powtarzają się w sposób ciągły (zwykle, ale można zapobiec zapętleniu).
  • Są wyciszone.

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

  • Zastąp wiersz w pliku index.html ciągiem <img>:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

Element <video>, który używa tych atrybutów, będzie odtwarzany automatycznie w nieskończoność, bez dźwięku i wbudowany (czyli nie na pełnym ekranie). To wszystko, czego można oczekiwać od animowanych GIF-ów. 🎉

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 ekranpełny ekran.

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

Weryfikacja za pomocą Lighthouse

Gdy witryna jest aktywna:

  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 wyboru Skuteczność.
  4. Kliknij przycisk Wygeneruj raport.

Raport „Użyj formatów wideo w treściach animowanych” powinien się zakończyć. Super! 💪