In het gedeelte 'Opportunities' van uw Lighthouse-rapport worden alle geanimeerde GIF's weergegeven, samen met de geschatte besparingen in seconden die worden behaald door deze GIF's naar video te converteren:
Waarom je geanimeerde GIF's moet vervangen door video
Grote GIF's zijn niet efficiënt voor het weergeven van geanimeerde content. Door grote GIF's naar video's te converteren, kunt u flink besparen op de bandbreedte van gebruikers. Overweeg MPEG4/WebM-video's te gebruiken voor animaties en PNG/WebP voor statische afbeeldingen in plaats van GIF om netwerkbytes te besparen.
MPEG-video's maken
Er zijn verschillende 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, voer je de volgende opdracht uit in je console:
ffmpeg -i my-animation.gif my-animation.mp4
Hiermee krijgt FFmpeg de opdracht om my-animation.gif als invoer te nemen, aangegeven door de -i vlag, en dit te converteren naar een video met de naam my-animation.mp4 .
WebM-video's maken
WebM-video's zijn veel kleiner dan MP4-video's, maar omdat niet alle browsers WebM ondersteunen, is het 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 op 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 moeten aan drie belangrijke eigenschappen voldoen die een video moet nabootsen:
- Ze spelen automatisch.
- Ze herhalen voortdurend (meestal, maar het is mogelijk om dit te voorkomen).
- Ze zijn stil.
Gelukkig kunt u deze gedragingen opnieuw creëren met 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 naar HTML5-video's converteert
Veel afbeeldings-CDN's ondersteunen de conversie van GIF naar HTML5-video. U uploadt een GIF naar de afbeeldings-CDN en de afbeeldings-CDN retourneert een HTML5-video.
Stapelspecifieke begeleiding
AMP
Voor geanimeerde content gebruikt u amp-anim om het CPU-gebruik te minimaliseren wanneer de content zich buiten het scherm bevindt.
Drupal
Overweeg om uw GIF te uploaden naar een service die deze beschikbaar stelt om als video in te sluiten.