Używaj formatów wideo w przypadku treści animowanych

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:

Zrzut ekranu z narzędzia Lighthouse dotyczącego użycia formatów wideo w kontroli treści animowanych

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.

Zasoby