Czy kiedykolwiek zdarzyło Ci się zobaczyć animowany GIF w usłudze takiej jak Imgur lub Gfycat i sprawdzić go w narzędziach deweloperskich, aby dowiedzieć się, czy GIF jest w rzeczywistości filmem? I masz ku temu dobry powód. Animowane pliki GIF mogą być wręcz ogromne.
Na szczęście jest to jeden z obszarów wydajności wczytywania, w których niewiele pracy można poświęcić, aby osiągnąć duże zyski. Konwertując duże GIF-y na filmy, możesz znacznie ograniczyć wykorzystanie przepustowości sieci.
Najpierw zmierz
Użyj narzędzia Lighthouse, aby znaleźć na swojej stronie GIF-y, które można przekonwertować na filmy. W Narzędziach deweloperskich kliknij kartę Audyty i zaznacz pole wyboru Wydajność. Następnie uruchom Lighthouse i sprawdź raport. Jeśli masz GIF-y, które można przekonwertować, powinna pojawić się sugestia „Użyj formatów filmów do treści animowanych”:
Twórz filmy MPEG
GIF-y można konwertować na filmy na wiele sposobów.
W tym przewodniku znajdziesz narzędzie FFmpeg.
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 -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Sprawi to, że FFmpeg przyjmuje jako dane wejściowe my-animation.gif
(oznaczone flagą -i
) i konwertuje go na film o nazwie my-animation.mp4
.
Koder libx264 działa tylko z plikami o identycznych wymiarach, np. 320 na 240 pikseli. Jeśli wejściowy GIF ma nieparzyste wymiary, możesz zastosować filtr przycinania, aby FFmpeg nie zwracał błędu „wysokość/szerokość nie podzielna przez 2”:
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Twórz filmy WebM
Chociaż format MP4 jest dostępny od 1999 r., WebM to stosunkowo nowy format pliku opublikowany w 2010 roku. Filmy WebM są znacznie mniejsze od filmów w formacie MP4, ale nie wszystkie przeglądarki obsługują WebM, więc warto wygenerować oba.
Aby użyć FFmpeg do przekonwertowania filmu my-animation.gif
na film w formacie WebM, uruchom w konsoli to polecenie:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Porównaj różnice
Oszczędności uzyskane dzięki GIF-om i filmom mogą być dość znaczne.
W tym przykładzie początkowy plik GIF ma 3,7 MB, a wersja MP4 (551 KB) i wersja WebM, czyli tylko 341 KB.
Zastąp obraz GIF-em filmem
Animowane GIF-y mają trzy główne cechy, które trzeba odtworzyć w filmie:
- Odtwarzają się automatycznie.
- Są one odtwarzane w pętli (zazwyczaj, ale można zapobiec zapętleniu).
- Nie odzywają się.
Na szczęście możesz odtworzyć te zachowania, używając elementu <video>
.
<video autoplay loop muted playsinline></video>
Element <video>
z tymi atrybutami odtwarza się automatycznie, bez końca zapętla się, nie odtwarza dźwięku i odtwarza bezpośrednio (czyli nie na pełnym ekranie). To zachowanie zgodne z charakterystycznymi cechami animowanych GIF-ów. 🎉
Element <video>
wymaga co najmniej jednego elementu podrzędnego <source>
wskazującego różne pliki wideo, które przeglądarka może wybrać w zależności od obsługi formatu. Prześlij zarówno WebM, jak i MP4, tak by jeśli przeglądarka
nie obsługuje WebM, by mogła przejść do formatu MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Wpływ na największe wyrenderowanie treści (LCP)
Pamiętaj, że chociaż elementy <img>
są kandydatami do LCP, elementy <video>
bez obrazu poster
nie są kandydatami do LCP. W przypadku emulacji animowanych GIF-ów nie należy dodać atrybutu poster
do elementów <video>
, ponieważ obraz pozostanie nieużywany.
Co to oznacza dla Twojej witryny? Zalecamy, aby zamiast animowanego GIF-a używać elementu <video>
, ale przy założeniu, że te multimedia nie kwalifikują się do uzyskania LCP, i zamiast niego zostanie użyty następny pod względem skuteczności kandydat. Ponieważ GIF-y i pliki <video>
są zwykle większe i wolniejsze pobieranie, przejście na inny kandydat LCP prawdopodobnie poprawi też wskaźnik LCP witryny.