Czy zdarzyło Ci się kiedyś zobaczyć animowany GIF w usłudze takiej jak Imgur czy Gfycat, sprawdzić go w narzędziach dla deweloperów i odkryć, że GIF był w rzeczywistości filmem? Jest ku temu dobry powód. Animowane GIF-y mogą być ogromne.
Na szczęście jest to jeden z tych obszarów wydajności ładowania, w których możesz wykonać stosunkowo niewiele pracy, aby osiągnąć ogromne korzyści. Konwertując duże GIF-y na filmy, możesz znacznie zmniejszyć zużycie przepustowości użytkowników.
Najpierw pomiar
Użyj Lighthouse, aby sprawdzić, czy w Twojej witrynie są GIF-y, które można przekonwertować na filmy. W Narzędziach deweloperskich kliknij kartę Audyty i zaznacz pole wyboru Wydajność. Następnie uruchom Lighthouse i sprawdź raport. Jeśli masz jakieś GIF-y, które można przekonwertować, zobaczysz sugestię „Używaj formatów wideo do treści animowanych”:
Tworzenie filmów MPEG
Istnieje kilka sposobów konwertowania GIF-ów na filmy.
FFmpeg
Aby użyć FFmpeg do przekonwertowania GIF-a my-animation.gif na film 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
Polecenie informuje FFmpeg, aby użył pliku my-animation.gif jako danych wejściowych (oznaczonych flagą
-i) i przekonwertował go na film o nazwie my-animation.mp4.
Koder libx264 działa tylko z plikami o parzystych wymiarach, np. 320 x 240 pikseli. Jeśli GIF wejściowy ma nieparzyste wymiary, możesz dodać filtr przycinania, aby uniknąć błędu „height/width not divisible by 2” (wysokość/szerokość niepodzielna przez 2) w FFmpeg:
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
Format MP4 istnieje od 1999 roku, a WebM to stosunkowo nowy format plików, który został wydany w 2010 roku. Filmy WebM są znacznie mniejsze niż filmy MP4, ale nie wszystkie przeglądarki obsługują format WebM, dlatego warto wygenerować oba formaty.
Aby użyć FFmpeg do przekonwertowania pliku my-animation.gif na film WebM, uruchom w konsoli to polecenie:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Porównanie różnic
Oszczędności wynikające z używania filmu zamiast GIF-a mogą być dość znaczne.
W tym przykładzie początkowy GIF ma 3,7 MB, a wersja MP4 – 551 KB, a wersja WebM – tylko 341 KB.
Zastępowanie GIF-a filmem
Animowane GIF-y mają 3 kluczowe cechy, które musi odtworzyć film:
- Odtwarzają się automatycznie.
- Odtwarzają się w pętli (zwykle, ale można temu zapobiec).
- Są ciche.
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, odtwarza się w pętli,
nie odtwarza dźwięku i odtwarza się w tekście (czyli nie na pełnym ekranie) – wszystkie te zachowania są charakterystyczne dla animowanych GIF-ów. 🎉
Na koniec element <video> wymaga co najmniej 1 elementu podrzędnego <source>, który wskazuje różne pliki wideo, z których przeglądarka może wybrać odpowiedni plik w zależności od obsługiwanego formatu. Udostępnij zarówno format WebM, jak 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)
Należy pamiętać, że elementy <img> są kandydatami do LCP, ale elementy <video> bez obrazu poster nie są kandydatami do LCP. W przypadku emulowania animowanych GIF-ów rozwiązaniem nie jest dodanie atrybutu poster do elementów <video>, ponieważ ten obraz nie będzie używany.
Co to oznacza dla Twojej witryny? Zalecamy używanie elementu <video> zamiast animowanego GIF-a, ale pamiętaj, że takie multimedia nie będą kandydatem do LCP, a zamiast nich zostanie użyty następny największy kandydat. Ponieważ GIF-y i <video> są zwykle większe i wolniej się pobierają, przejście na innego kandydata do LCP prawdopodobnie poprawi nawet LCP witryny.