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.
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”:
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.
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.