Zastąp GIF-y filmem

Rob Dodson

W tym ćwiczeniu z programowania zwiększ wydajność, zastępując animowany GIF filmem.

Najpierw zmierz

Najpierw sprawdź skuteczność witryny:

  1. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem 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 jest zaznaczone pole wyboru Skuteczność.
  5. Kliknij przycisk Wygeneruj raport.

Gdy skończysz, zauważysz, że narzędzie Lighthouse oznaczyło plik GIF jako problem podczas kontroli „Używaj formatów filmów do tworzenia treści animowanych”.

Pobierz FFmpeg

GIF-y można konwertować na filmy na kilka sposobów. W tym przewodniku używana jest usługa FFmpeg. Jest już zainstalowana w maszynie wirtualnej Glitch. Jeśli chcesz, możesz też wykonać te instrukcje, aby zainstalować ją na komputerze lokalnym.

Otwórz konsolę

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

  1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  2. Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
  3. W konsoli uruchom następujące polecenie:
which ffmpeg

Powinna zostać zwrócona ścieżka do pliku:

/usr/bin/ffmpeg

Zmień GIF-a na film

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

Powinien pojawić się ekran podobny do tego:

$ ls
cat-herd.gif
  • W konsoli uruchom następujące 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 pobierze wejściowy (oznaczony flagą -i) pliku cat-herd.gif i przekonwertuje go na film o nazwie cat-herd.mp4. To powinno chwilę potrwać. Po zakończeniu wykonywania polecenia możesz ponownie wpisać ls i wyświetlić 2 pliki:

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

Twórz filmy WebM

Format MP4 jest dostępny od 1999 r., ale WebM to względnie nowy format, którego premiera rozpoczęła się w 2010 r. Filmy WebM są znacznie mniejsze niż pliki MP4, więc warto wygenerować je oba. Na szczęście element <video> pozwala dodawać wiele źródeł, więc jeśli przeglądarka nie obsługuje WebM, może użyć formatu MP4.

  • W konsoli uruchom następujące polecenie:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • Aby sprawdzić uruchamiane rozmiary plików:
ls -lh

Musisz mieć 1 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

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

Zaktualizuj kod HTML, aby odtworzyć efekt GIF

Animowane pliki GIF mają 3 kluczowe cechy, które pozwalają odtworzyć w filmach te cechy:

  • Odtwarzają się automatycznie.
  • Są one odtwarzane w pętli (zazwyczaj, ale można zapobiec zapętleniu).
  • Nie odzywają się.

Na szczęście możesz odtworzyć te zachowania, używając elementu <video>.

  • W pliku index.html zastąp wiersz wierszem <img> ciągiem:
<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, zapętlony bez końca, bez dźwięku i odtwarzany bezpośrednio (czyli bez pełnego ekranu). To wszystko, co jest zgodne z działaniami oczekiwanymi w przypadku animowanych GIF-ów. 🎉

Określ źródła

Musisz tylko określić źródła wideo. Element <video> wymaga co najmniej jednego elementu podrzędnego <source> wskazującego różne pliki wideo, które przeglądarka może wybrać, w zależności od obsługi formatu. Dodaj w polu <video> elementy <source>, które prowadzą do Twoich filmów Short:

<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ę, a potem Pełny ekran pełny ekran.

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

Zweryfikuj w Lighthouse

Po otwarciu opublikowanej witryny:

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

Wygląda na to, że kontrola „Używaj formatów wideo w treściach animowanych” została zakończona. Super! 💪