Sekcja Możliwości w raporcie Lighthouse zawiera wszystkie animowane GIF-y wraz z informacjami o szacunkowej oszczędności (w sekundach), jaką można uzyskać po przekonwertowaniu tych GIF-ów na filmy:
Dlaczego warto zastąpić animowane GIF-y filmami
Duże pliki GIF nie są efektywne przy przesyłaniu treści animowanych. Konwersji dużych GIF-ów na filmy możesz zmniejszyć użycie przepustowości łącza użytkownika. Rozważ użycie filmów MPEG4/WebM (animacji) i PNG/WebP (obrazów statycznych) zamiast GIF-ów, aby zmniejszyć ilość przesyłanych danych.
Twórz filmy MPEG
Istnieje kilka sposobów konwertowania GIF-ów na filmy.
FFmpeg to narzędzie użyte w tym przewodniku.
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 my-animation.mp4
Sprawia to, że program FFmpeg przyjmuje dane wejściowe my-animation.gif
(oznaczone flagą -i
) i konwertuje je na film o nazwie my-animation.mp4
.
Twórz filmy WebM
Filmy WebM są znacznie mniejsze od filmów w formacie MP4, ale nie wszystkie przeglądarki obsługują technologię WebM, więc warto utworzyć oba.
Aby przekonwertować film my-animation.gif
na film WebM za pomocą FFmpeg, uruchom to polecenie w konsoli:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Zastąp obraz GIF-em filmem
Animowane GIF-y mają trzy główne cechy, które film musi odtworzyć:
- Odtwarzają się automatycznie.
- Są one odtwarzane w sposób ciągły (zwykle, ale można uniknąć zapętlenia).
- Są ciche.
Na szczęście możesz je odtworzyć, korzystając z elementu <video>
.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Korzystanie z usługi konwertującej pliki GIF na filmy HTML5
Wiele sieci CDN z obrazami obsługuje konwersję wideo z GIF na HTML5. Przesyłasz GIF-a do CDN z obrazami, a ta sieć CDN z obrazami zwraca film w formacie HTML5.
Wskazówki dotyczące stosu
AMP
W przypadku treści animowanych stosuj parametr amp-anim
, aby zminimalizować wykorzystanie procesora, gdy treści znajdują się poza ekranem.