Zastąp GIF-y filmem

Rob Dodson

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

Zacznij od pomiaru

Najpierw sprawdź 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. Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.

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

Pobieranie FFmpeg

Istnieje kilka sposobów konwertowania GIF-ów na filmy. W tym przewodniku wykorzystano format 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. Kliknij Remix to Edit (Zmiksuj do edycji), aby umożliwić edycję projektu.
  2. Kliknij Terminal (uwaga: jeśli nie widzisz przycisku terminala, włącz pełny ekran).
  3. W konsoli wykonaj te czynności:
which ffmpeg

Powinieneś otrzymać ścieżkę 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

Dzięki temu program FFmpeg przekonwertuje wartość input (oznaczoną flagą -i) z pliku cat-herd.gif do pliku wideo o nazwie cat-herd.mp4. Wykonanie tego polecenia powinno zająć około sekundy. 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 wykonaj te czynności:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Aby sprawdzić rozmiary plików, wykonaj te czynności:
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 ponownie utworzyć efekt GIF

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

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

Na szczęście możesz odtworzyć te zachowania, korzystając z 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>, 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 doskonale.

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. Upewnij się, że na liście Kategorie 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! 💪