Czy zdarzyło Ci się zobaczyć animowany GIF w usłudze takiej jak Imgur czy Gfycat, sprawdzić go w narzędziach dla programistów, a potem odkryć, że to w rzeczy samej jest to film? Jest ku temu dobry powód. Animowane GIF-y mogą być ogromne.
Na szczęście jest to jeden z tych obszarów wydajności wczytywania, w których możesz osiągnąć ogromne korzyści przy stosunkowo niewielkim nakładzie pracy. Konwertowanie dużych plików GIF na filmy pozwala zaoszczędzić na przepustowości użytkowników.
Pomiar najpierw
Użyj Lighthouse, aby sprawdzić, czy w Twojej witrynie nie ma GIF-ów, które można przekształcić w filmy. W DevTools kliknij kartę Audyt i zaznacz pole wyboru Skuteczność. Następnie uruchom Lighthouse i sprawdź raport. Jeśli masz GIF-y, które można przekonwertować, zobaczysz sugestię „Użyj formatów wideo do treści animowanych”:
Tworzenie filmów MPEG
Istnieje kilka sposobów konwertowania GIF-ów na filmy. W tym przewodniku użyjemy narzędzia FFmpeg.
Aby za pomocą FFmpeg przekonwertować GIF (my-animation.gif) na plik wideo 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
To polecenie informuje FFmpeg, aby użyć pliku my-animation.gif jako wejścia (oznaczonego flagą -i) i przekształcić go w film o nazwie my-animation.mp4.
Koder libx264 działa tylko z plikami o parzystych wymiarach, np. 320 x 240 pikseli. Jeśli wejściowy GIF ma nieparzyste wymiary, możesz użyć filtra przycinania, aby uniknąć błędu FFmpeg „height/width not divisible by 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
Tworzenie filmów WebM
Podczas gdy format MP4 istnieje od 1999 r., WebM jest stosunkowo nowym formatem pliku, który został po raz pierwszy opublikowany w 2010 r. Pliki wideo WebM są znacznie mniejsze niż MP4, ale nie wszystkie przeglądarki obsługują WebM, więc warto wygenerować oba formaty.
Aby za pomocą FFmpeg przekonwertować plik my-animation.gif na plik wideo WebM, uruchom na 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 na kosztach między GIF-em a filmem mogą być dość znaczne.
W tym przykładzie początkowy GIF ma rozmiar 3, 7 MB, w porównaniu z wersją MP4, która ma 551 KB, i wersją WebM, która ma tylko 341 KB!
Zastąp GIF-a filmem
Animowane GIF-y mają 3 kluczowe cechy, które musi odtworzyć film:
- są 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 za pomocą elementu <video>.
<video autoplay loop muted playsinline></video>
Element <video> z tymi atrybutami odtwarza się automatycznie, w pętli, bez dźwięku i wbudowany (czyli nie na pełnym ekranie). To wszystko, czego oczekuje się od animowanych GIF-ów. 🎉
Na koniec element <video> wymaga co najmniej 1 elementu podrzędnego <source> wskazującego różne pliki wideo, spośród których przeglądarka może wybrać, w zależności od obsługiwanych formatów. Podaj formaty WebM i MP4, aby w przypadku, gdy przeglądarka nie obsługuje formatu WebM, mogła użyć 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 elementy <img> mogą być kandydatami do LCP, ale elementy <video> bez obrazu poster nie mogą być kandydatami do LCP. Rozwiązaniem w przypadku emulowania animowanych GIF-ów jest nie dodawanie atrybutu poster do elementów <video>, ponieważ obraz nie zostanie użyty.
Co to oznacza dla Twojej witryny? Zalecamy używanie <video> zamiast animowanych GIF-ów, pamiętając, że takie multimedia nie będą kandydatami do LCP, a zamiast nich będzie używany kolejny największy kandydat. Ponieważ pliki GIF i pliki <video> są zwykle większe i dłużej się pobierają, przejście na inny kandydata do LCP prawdopodobnie poprawi LCP witryny.