GIF, MP4 of WebM: welk formaat voor loops

GIF of MP4 hangt af van waar de loop gaat spelen. Op websites en social media is MP4 (en zijn open neef WebM) bijna altijd de juiste keuze: bestanden zijn meestal veel kleiner, de kleur is vloeiend en het afspelen is efficiënt. GIF is op één plek nog de juiste keuze, e-mail, omdat de meeste inboxen geanimeerde GIF’s tonen en heel weinig video afspelen. Al het andere in deze gids is detail bij die regel.

Wat elk formaat eigenlijk is

GIF is een afbeeldingsformaat uit de late jaren 80 dat meerdere frames kan bevatten. Het slaat elk frame op met een palet van hooguit 256 kleuren en comprimeert elk frame op zichzelf. MP4 en WebM zijn videoformaten. Ze gebruiken moderne videocodecs, zoals H.264 in MP4 en VP9 of AV1 in WebM, die opslaan wat er tussen frames verandert in plaats van elk frame volledig. Voor een loop waarin het grootste deel van het beeld langzaam verandert, is dat verschil enorm.

Waarom kleurverlopen er als GIF slecht uitzien

Een vloeiend kleurverloop over een frame van 1080 pixels kan duizenden verschillende kleuren gebruiken. Een GIF-frame kan er hooguit 256 bevatten. De encoder heeft twee keuzes: kleuren afronden naar de dichtstbijzijnde kleur in het palet, wat zichtbare strepen geeft, of pixels van naburige kleuren verspreiden om de tussentinten na te bootsen, dithering genoemd, wat gespikkeld oogt en bestanden groter maakt. Geen van beide lijkt op het kleurverloop dat je ontwierp.

Korrel helpt een beetje, omdat ruisige beelden paletgrenzen beter verbergen dan strakke. Maar de echte oplossing is geen GIF gebruiken waar video mogelijk is. Banding in kleurverlopen legt hetzelfde probleem uit bij stilstaande beelden.

MP4 of WebM voor websites

Vervang op een website GIF’s door een video-element dat zich als een GIF gedraagt: automatisch afspelend, zonder geluid, loopend en inline. De gids van web.dev over geanimeerde GIF’s vervangen door video legt de aanpak uit. Bied WebM eerst aan, omdat die vaak kleiner is, en MP4 als terugval die bijna overal speelt.

<!-- Instead of <img src="loop.gif" alt=""> -->
<video autoplay muted loop playsinline width="600" height="600"
       poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

Twee andere formaten zijn het kennen waard. Geanimeerde WebP en geanimeerde AVIF zijn afbeeldingsformaten, gebruikt in een gewone img-tag zoals een GIF, maar met volledige kleur en veel betere compressie. Moderne browsers ondersteunen ze allebei. Ze zijn handig waar een CMS of platform alleen afbeeldingen accepteert, maar niet voor e-mail. Voor achtergronden over de volle breedte, lees videoachtergronden op websites.

Loops voor social media

Sociale platforms zijn rond video gebouwd, en MP4 is het formaat dat ze allemaal accepteren. Waar een platform een GIF-upload aanneemt, behandelt het die vaak anders dan een normale video, dus een GIF is zelden een voordeel. Exporteer je loop als MP4 op het formaat van het platform, in H.264, en laat het platform de rest doen. Bewegende of stilstaande posts behandelt formaten en instellingen.

Loops in e-mail: nog steeds GIF

De meeste e-mailclients spelen geen video af, dus een geanimeerde GIF is de praktische manier om beweging in een e-mail te krijgen. Houd hem klein en behandel het eerste frame als terugval: sommige clients, waaronder enkele versies van het klassieke Outlook voor Windows, tonen alleen het eerste frame. Zet de boodschap in dat frame, zodat er niets verloren gaat. Onze gidsen over e-mailheaders ontwerpen en kleurverlopen in e-mail behandelen de rest.

1. 1

   Houd hem kort

   Twee tot zes seconden is ruim genoeg in een e-mail; elk frame voegt gewicht toe.

2. 2

   Verklein formaat en framerate

   Exporteer op de breedte waarop hij wordt getoond, vaak 600 pixels, en op een lagere framerate, zoals 10 tot 15 frames per seconde, voor langzame beweging.

3. 3

   Zet de boodschap in frame één

   Lezers die alleen het eerste frame zien, moeten de boodschap toch meekrijgen.

4. 4

   Controleer de bestandsgrootte

   Grote GIF’s laden traag op telefoons. Is hij zwaar, kort dan eerst lengte, formaat of kleuren in.

Omzetten tussen GIF en MP4

ffmpeg, een gratis opdrachtregeltool, doet beide richtingen. Video omzetten naar een goede GIF vraagt om een eigen palet dat uit de video zelf wordt opgebouwd; een GIF omzetten naar MP4 is eenvoudiger.

# MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip
ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif

# GIF to MP4: H.264, even dimensions, ready for the web
ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4

# MP4 to WebM (VP9)
ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm

Welk formaat je gebruikt, in één oogopslag

Maak je loops in Gradiently, dan exporteert de Studio allebei: een video (MP4 waar je browser die kan opnemen, anders WebM) tot 1080p, en een GIF met een keuze in kwaliteit die onder de 15 MB blijft. Zorg dat de loop netjes aansluit, welke je ook kiest; zie naadloze loops.