In het gedeelte Mogelijkheden van uw Lighthouse-rapport worden alle geanimeerde GIF's vermeld, samen met de geschatte besparingen in seconden die worden bereikt door deze GIF's naar video te converteren:
![Een screenshot van de Lighthouse Gebruik videoformaten voor audit van geanimeerde inhoud](https://developer.chrome.google.cn/static/docs/lighthouse/performance/efficient-animated-content/image/a-screenshot-the-lightho-8a0ec21794e2.png?authuser=8&hl=nl)
Waarom je geanimeerde GIF's zou moeten vervangen door video
Grote GIF's zijn inefficiënt voor het leveren van geanimeerde inhoud. Door grote GIF's naar video's te converteren, kunt u flink besparen op de bandbreedte van gebruikers. Overweeg het gebruik van MPEG4/WebM-video's voor animaties en PNG/WebP voor statische afbeeldingen in plaats van GIF om netwerkbytes te besparen.
Maak MPEG-video's
Er zijn een aantal manieren om GIF's naar video te converteren. FFmpeg is de tool die in deze handleiding wordt gebruikt. Om FFmpeg te gebruiken om de GIF, my-animation.gif
naar een MP4-video te converteren, voert u de volgende opdracht uit in uw console:
ffmpeg -i my-animation.gif my-animation.mp4
Dit vertelt FFmpeg om my-animation.gif
als invoer te nemen, aangegeven door de vlag -i
, en deze te converteren naar een video met de naam my-animation.mp4
.
Maak WebM-video's
WebM-video's zijn veel kleiner dan MP4-video's, maar niet alle browsers ondersteunen WebM, dus het is zinvol om beide te genereren.
Om FFmpeg te gebruiken om my-animation.gif
naar een WebM-video te converteren, voert u de volgende opdracht uit in uw console:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Vervang de GIF-afbeelding door een video
Geanimeerde GIF's hebben drie belangrijke kenmerken die een video moet repliceren:
- Ze spelen automatisch.
- Ze lussen continu (meestal, maar het is mogelijk om lussen te voorkomen).
- Ze zijn stil.
Gelukkig kun je dit gedrag opnieuw creëren met behulp van het <video>
-element.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Gebruik een service die GIF's converteert naar HTML5-video's
Veel afbeeldings-CDN's ondersteunen videoconversie van GIF naar HTML5. U uploadt een GIF naar de afbeeldings-CDN en de afbeeldings-CDN retourneert een HTML5-video.
Stapelspecifieke begeleiding
AMP
Voor geanimeerde inhoud gebruikt u amp-anim
om het CPU-gebruik te minimaliseren wanneer de inhoud zich buiten het scherm bevindt.