Zastąp animowane GIF-y filmami, aby przyspieszyć wczytywanie stron

Czy zdarzyło Ci się zobaczyć animowany GIF w usłudze takiej jak Imgur czy Gfycat, sprawdzić go w narzędziach dla programistów, a potem odkryć, że to w rzeczy samej jest to film? Jest ku temu dobry powód. Animowane GIF-y mogą być ogromne.

Panel sieci DevTools pokazujący GIF o rozmiary 13,7 MB.

Na szczęście jest to jeden z tych obszarów wydajności wczytywania, w których możesz osiągnąć ogromne korzyści przy stosunkowo niewielkim nakładzie pracy. Konwertowanie dużych plików GIF na filmy pozwala zaoszczędzić na przepustowości użytkowników.

Pomiar najpierw

Użyj Lighthouse, aby sprawdzić, czy w Twojej witrynie nie ma GIF-ów, które można przekształcić w filmy. W DevTools kliknij kartę Audyt i zaznacz pole wyboru Skuteczność. Następnie uruchom Lighthouse i sprawdź raport. Jeśli masz GIF-y, które można przekonwertować, zobaczysz sugestię „Użyj formatów wideo do treści animowanych”:

Nieudany audyt Lighthouse: używaj formatów wideo do animowanych treści.

Tworzenie filmów MPEG

Istnieje kilka sposobów konwertowania GIF-ów na filmy. W tym przewodniku użyjemy narzędzia FFmpeg. Aby za pomocą FFmpeg przekonwertować GIF (my-animation.gif) na plik wideo MP4, uruchom w konsoli to polecenie:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

To polecenie informuje FFmpeg, aby użyć pliku my-animation.gif jako wejścia (oznaczonego flagą -i) i przekształcić go w film o nazwie my-animation.mp4.

Koder libx264 działa tylko z plikami o parzystych wymiarach, np. 320 x 240 pikseli. Jeśli wejściowy GIF ma nieparzyste wymiary, możesz użyć filtra przycinania, aby uniknąć błędu FFmpeg „height/width not divisible by 2”:

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Tworzenie filmów WebM

Podczas gdy format MP4 istnieje od 1999 r., WebM jest stosunkowo nowym formatem pliku, który został po raz pierwszy opublikowany w 2010 r. Pliki wideo WebM są znacznie mniejsze niż MP4, ale nie wszystkie przeglądarki obsługują WebM, więc warto wygenerować oba formaty.

Aby za pomocą FFmpeg przekonwertować plik my-animation.gif na plik wideo WebM, uruchom na konsoli to polecenie:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Porównaj różnice

Oszczędności na kosztach między GIF-em a filmem mogą być dość znaczne.

Porównanie rozmiarów plików: GIF – 3,7 MB, MP4 – 551 KB, WEBM – 341 KB.

W tym przykładzie początkowy GIF ma rozmiar 3, 7 MB, w porównaniu z wersją MP4, która ma 551 KB, i wersją WebM, która ma tylko 341 KB!

Zastąp GIF-a filmem

Animowane GIF-y mają 3 kluczowe cechy, które musi odtworzyć film:

  • są odtwarzane automatycznie;
  • Zazwyczaj są one odtwarzane w pętli (można jednak zablokować tę funkcję).
  • Są wyciszone.

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

<video autoplay loop muted playsinline></video>

Element <video> z tymi atrybutami odtwarza się automatycznie, w pętli, bez dźwięku i wbudowany (czyli nie na pełnym ekranie). To wszystko, czego oczekuje się od animowanych GIF-ów. 🎉

Na koniec element <video> wymaga co najmniej 1 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ługiwanych formatów. Podaj formaty WebM i MP4, aby w przypadku, gdy przeglądarka nie obsługuje formatu WebM, mogła użyć formatu MP4.

<video autoplay loop muted playsinline>
 
<source src="my-animation.webm" type="video/webm">
 
<source src="my-animation.mp4" type="video/mp4">
</video>

Wpływ na największe wyrenderowanie treści (LCP)

Pamiętaj, że elementy <img> mogą być kandydatami do LCP, ale elementy <video> bez obrazu poster nie mogą być kandydatami do LCP. Rozwiązaniem w przypadku emulowania animowanych GIF-ów jest nie dodawanie atrybutu poster do elementów <video>, ponieważ obraz nie zostanie użyty.

Co to oznacza dla Twojej witryny? Zalecamy używanie <video> zamiast animowanych GIF-ów, pamiętając, że takie multimedia nie będą kandydatami do LCP, a zamiast nich będzie używany kolejny największy kandydat. Ponieważ pliki GIF i pliki <video> są zwykle większe i dłużej się pobierają, przejście na inny kandydata do LCP prawdopodobnie poprawi LCP witryny.