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

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:

Zrzut ekranu pokazujący audyt dotyczący formatów wideo w przypadku animacji w narzędziu Lighthouse

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żna znacznie zmniejszyć przepustowość wykorzystywaną przez 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. FFmpeg to narzędzie używane w tym przewodniku. Aby przekonwertować plik GIF (my-animation.gif) na film MP4 za pomocą programu FFmpeg, 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 przekonwertował go na film o nazwie my-animation.mp4.

Tworzenie filmów WebM

Filmy WebM są znacznie mniejsze od filmów MP4, ale nie wszystkie przeglądarki obsługują WebM, więc warto generować je w obu przypadkach.

Aby przekonwertować plik my-animation.gif na film WebM za pomocą narzędzia 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 wideo

Animowane GIF-y mają 3 kluczowe cechy, które musi odtworzyć film:

  • Są one odtwarzane automatycznie.
  • Zazwyczaj są one odtwarzane w pętli (chociaż można temu zapobiec).
  • Są wyciszone.

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>

Użyj usługi, która konwertuje GIF-y na filmy w formacie HTML5.

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

Wskazówki dotyczące stosu

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 pliku wideo.

Zasoby