Gebruik videoformaten voor geanimeerde inhoud

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

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.

Bronnen