W sekcji Możliwości raportu Lighthouse znajdziesz listę wszystkich animowanych GIF-ów wraz z szacowanymi oszczędnościami w sekundach uzyskanymi dzięki konwersji tych GIF-ów na film:
Dlaczego trzeba zastąpić animowane GIF-y filmami
Duże pliki GIF są nieefektywnym sposobem dostarczania animacji. Konwertując duże GIF-y na filmy, możesz dużo oszczędzać połączenia internetowego. Proponujemy użyć zamiast nich filmów MPEG4/WebM (animacje) lub plików PNG/WebP (obrazy statyczne), aby zmniejszyć ilość przesyłanych danych.
Twórz filmy MPEG
Istnieje kilka sposobów konwertowania GIF-ów na filmy.
FFmpeg to narzędzie używane w tym przewodniku.
Aby użyć programu FFmpeg do konwersji GIF-a, my-animation.gif na film MP4:
uruchom w konsoli to polecenie:
ffmpeg -i my-animation.gif my-animation.mp4
To polecenie informuje FFmpeg, aby jako dane wejściowe przyjął plik my-animation.gif (oznaczony flagą -i), i przekształcił go w film o nazwie my-animation.mp4.
Tworzenie filmów WebM
Filmy WebM są znacznie mniejsze od plików MP4. ale nie wszystkie przeglądarki obsługują WebM, warto więc wygenerować oba.
Aby za pomocą FFmpeg przekonwertować plik my-animation.gif na plik wideo WebM, uruchom w konsoli to polecenie:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Zastępowanie obrazu GIF filmem wideo
Animowane GIF-y mają 3 kluczowe cechy, które musi odtworzyć film:
- Są one 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, 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>
Używanie usługi, która konwertuje GIF-y na filmy HTML5
Wiele sieci CDN z obrazami obsługuje konwersje wideo w formacie GIF na HTML5. Przesyłasz plik GIF do obrazu CDN, a obraz CDN zwraca film HTML5.
Wskazówki dotyczące poszczególnych zbiorów
AMP
W przypadku treści animowanych stosuj atrybut amp-anim, aby zminimalizować wykorzystanie procesora, gdy te treści znajdują się poza ekranem.