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

Czy zdarzyło Ci się zobaczyć animowany GIF w serwisie takim jak Imgur czy Gfycat, w narzędziach dla programistów, aby dowiedzieć się, że GIF to naprawdę film? Jest z dobrych powodów. Animowane GIF-y mogą być ogromne.

Panel sieci w Narzędziach deweloperskich z plikiem GIF o rozmiarze 13,7 MB.

Na szczęście jest to jeden z tych obszarów wydajności wczytywania, w których warto stosunkowo mało pracy, aby osiągnąć ogromne korzyści! Przekonwertuj duże pliki GIF na wideo, możesz dużo zaoszczędzić na użytkownikach .

Zacznij od pomiaru

Użyj narzędzia Lighthouse, aby sprawdzić, czy na stronie znajdują się GIF-y, które można przekonwertować na filmy. W w Narzędziach deweloperskich kliknij kartę Kontrole i zaznacz pole wyboru Wydajność. Następnie uruchom Lighthouse i sprawdź raport. Jeśli masz GIF-y, które można przekonwertować, powinna wyświetlić się sugestia „Użyj przycisku formaty wideo dla treści animowanych”:

Niezaliczony audyt Lighthouse: wykorzystanie formatów wideo w treściach animowanych.

Twórz filmy MPEG

Jest wiele sposobów konwertowania GIF-ów na filmy, Narzędzie użyte w tym przewodniku to FFmpeg. Aby użyć programu FFmpeg do przekonwertowania GIF-a, my-animation.gif na film MP4, uruchom to polecenie w konsoli:

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

Dzięki temu FFmpeg ma przyjąć my-animation.gif jako wartość wejściową oznaczoną znakiem -i i przekonwertować ją na film o nazwie my-animation.mp4.

Koder libx264 działa tylko z plikami o równych wymiarach, np. 320 pikseli na 240 pikseli. Jeśli wejściowego GIF-a ma nieparzyste wymiary, możesz użyć filtra przycinania, aby unikaj zgłaszania przez FFmpeg atrybutu „height/width” (wysokość/szerokość niedzielna przez 2), błąd:

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

Utwórz filmy WebM

MP4 istnieje od 1999 r., ale WebM to stosunkowo nowy format plików wydana po raz pierwszy w 2010 r. Filmy WebM są znacznie mniejsze od formatu MP4, Nie wszystkie przeglądarki obsługują WebM, więc warto wygenerować oba.

Aby użyć formatu FFmpeg do konwersji pliku my-animation.gif na film WebM, uruchom następujące polecenie w konsoli:

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

Porównaj różnice

Oszczędności wynikające z połączenia GIF-ów i filmów mogą być całkiem spore.

Porównanie rozmiaru pliku: 3,7 MB dla pliku GIF, 551 KB w przypadku pliku MP4 i 341 KB w przypadku formatu WebM.

W tym przykładzie początkowy plik GIF ma 3,7 MB w porównaniu do wersji MP4, rozmiar pliku to 551 KB, a wersja WebM – tylko 341 KB.

Zastąp obraz GIF-em filmem

Animowane GIF-y mają 3 kluczowe cechy, które musi powielić w filmie:

  • 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>.

<video autoplay loop muted playsinline></video>

Element <video> z tymi atrybutami odtwarza się automatycznie, jest odtwarzany w nieskończoność, nie odtwarza dźwięku, ale jest odtwarzany w tekście (czyli nie na pełnym ekranie) zachowanie oczekiwane w przypadku animowanych GIF-ów. 🎉

I wreszcie element <video> wymaga co najmniej jednego elementu podrzędnego <source> wskazując na różne pliki wideo, z których przeglądarka może wybierać, w zależności z obsługą formatu przeglądarki. Prześlij zarówno WebM, jak i MP4, aby nie obsługuje formatu WebM, dlatego może korzystać z 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 chociaż elementy <img> są kandydatami do LCP, elementy <video> bez obrazu poster nie są kandydatami LCP. W przypadku emulacji animowanych GIF-ów nie należy dodać atrybutu poster do elementów <video>, ponieważ obraz ten nie będzie używany.

Co to oznacza dla Twojej witryny? Zalecamy nieustanne korzystanie z elementu <video> zamiast animowanego GIF-a, ale przy założeniu, że takie treści multimedialne nie będą kandydatem do LCP i w zamian zostanie użyty kolejny co do wielkości kandydat. Pliki GIF i <video> są zwykle większe i pobierają się wolniej, dlatego zmiana LCP witryny na inny kandydujący LCP prawdopodobnie poprawi wskaźnik LCP witryny.