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

W sekcji Możliwości w raporcie Lighthouse znajdziesz listę wszystkich animowanych GIF-ów wraz z szacunkowymi oszczędnościami w sekundach, jakie można uzyskać, konwertując te GIF-y na filmy:

Zrzut ekranu przedstawiający narzędzie Lighthouse do sprawdzania, czy w przypadku treści animowanych używane są formaty wideo

Dlaczego warto zastąpić animowane GIF-y filmami

Duże pliki GIF są nieefektywnym sposobem dostarczania animacji. Konwertując duże pliki GIF na filmy, możesz znacznie zmniejszyć zużycie przepustowości użytkowników. Proponujemy użyć zamiast nich filmów MPEG4/WebM (animacje) lub plików PNG/WebP (obrazy statyczne), aby zmniejszyć ilość przesyłanych danych.

Tworzenie filmów MPEG

Istnieje kilka sposobów konwertowania GIF-ów na filmy. W tym przewodniku używamy narzędzia FFmpeg. Aby przekonwertować GIF-a my-animation.gif na film MP4 za pomocą FFmpeg, uruchom w konsoli to polecenie:

ffmpeg -i my-animation.gif my-animation.mp4

To polecenie informuje FFmpeg, że my-animation.gif to plik wejściowy (oznaczony flagą -i), który należy przekonwertować na film o nazwie my-animation.mp4.

Tworzenie filmów WebM

Filmy WebM są znacznie mniejsze niż filmy MP4, ale nie wszystkie przeglądarki obsługują format WebM, więc warto wygenerować oba formaty.

Aby przekonwertować plik my-animation.gif na film WebM za pomocą FFmpeg, 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

Animowane GIF-y mają 3 główne cechy, które musi odzwierciedlać film:

  • Odtwarzają się automatycznie.
  • Zapętlają się w sposób ciągły (zwykle, ale można temu zapobiec).
  • Nie wydają dźwięku.

Na szczęście możesz odtworzyć te zachowania za pomocą 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, która konwertuje GIF-y na filmy HTML5

Wiele sieci CDN do obsługi obrazów obsługuje konwersję GIF-ów na filmy HTML5. Przesyłasz plik GIF do sieci CDN obrazów, a sieć CDN obrazów zwraca film HTML5.

Wskazówki dotyczące konkretnych stosów

AMP

W przypadku treści animowanych stosuj atrybut amp-anim, aby zminimalizować wykorzystanie procesora, gdy te treści znajdują się poza ekranem.

Drupal

Możesz przesłać plik GIF do usługi, która umożliwi umieszczanie go jako filmu.

Zasoby