Zastąp GIF-y filmem

Rob Dodson

Dzięki temu ćwiczeniu w programowaniu możesz zwiększyć wydajność, zastępując animowany GIF film.

Najpierw zmierz pomiar

Najpierw sprawdź skuteczność strony:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran peł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.

Gdy skończysz, zobaczysz, że Lighthouse oznaczył GIF-a jako Problem w sekcji „Użyj formatów wideo dla treści animowanych”.

Pobierz plik FFmpeg

Istnieje kilka sposobów konwertowania GIF-ów na filmy. w tym przewodniku FFmpeg. Jest już zainstalowany w maszynie wirtualnej Glitch, Możesz również postępować zgodnie z tymi instrukcjami, aby zainstalować lokalna na komputerze .

Otwórz konsolę

Upewnij się, że program 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 uruchom polecenie:
which ffmpeg

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

/usr/bin/ffmpeg

Zmień GIF na film

  • Aby przejść do katalogu images, w konsoli uruchom polecenie cd images.
  • Uruchom ls, aby zobaczyć zawartość.

Powinien pojawić się ekran podobny do tego:

$ ls
cat-herd.gif
  • W konsoli uruchom polecenie:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

Dzięki temu FFmpeg użyje danych wejściowych (oznaczonych flagą -i), cat-herd.gif i przekonwertuj go do pliku wideo o nazwie cat-herd.mp4. To powinno zająć przed biegiem. Po zakończeniu wykonywania polecenia wpisanie ls powinno być możliwe i wyświetlą 2 pliki:

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

Utwórz filmy WebM

Format MP4 istnieje od 1999 r., jednak WebM jest stosunkowo nowym rozwiązaniem, wydana po raz pierwszy w 2010 r. Filmy WebM mogą być znacznie mniejsze od plików MP4, warto generować oba te elementy. Na szczęście element <video> pozwala dodaj wiele źródeł, więc jeśli przeglądarka nie obsługuje WebM, może użyć 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 rozmiar 3,7 MB, a wersja MP4 – 551 KB. Wersja WebM to tylko 341 KB. To ogromna oszczędność.

Zaktualizuj kod HTML, aby odtworzyć efekt GIF-a

Animowane GIF-y mają 3 kluczowe cechy, które trzeba powielać w filmach:

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

Na szczęście możesz odtworzyć te zachowania, korzystając z 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> korzystający z tych atrybutów będzie odtwarzany automatycznie w pętli bez końca oraz bez dźwięku w treści strony (czyli nie na pełnym ekranie). zachowanie zgodne z oczekiwaniami użytkowników animowanych GIF-ów. 🎉

Określ źródła

Teraz musisz tylko określić źródła filmu. Element <video> wymaga co najmniej jeden element podrzędny <source> wskazujący różne pliki wideo w zależności od obsługi formatu. Zaktualizuj pole <video> o elementy <source>, które prowadzą do Twoich filmów o stado kotów:

<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 naciśnij Pełny ekran pełny ekran

Interfejs powinien wyglądać tak samo. Idzie Ci doskonale.

Zweryfikuj za pomocą Lighthouse

Po otwarciu aktywnej strony:

  1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  2. Kliknij kartę Lighthouse.
  3. Upewnij się, że na liście Kategorie zaznaczone jest pole wyboru Skuteczność.
  4. Kliknij przycisk Wygeneruj raport.

Powinien wyświetlić się komunikat „Użyj formatów wideo dla treści animowanych”. kontrola jest teraz zalicza! Super! 💪