GIF, MP4 eller WebM: vilket format ska du välja för loopar

GIF eller MP4 avgörs av var loopen ska spelas. På webbplatser och i sociala medier är MP4 (och dess öppna kusin WebM) nästan alltid rätt val: filerna är oftast betydligt mindre, färgen är jämn och uppspelningen effektiv. GIF är fortfarande rätt val på ett ställe, i mejl, eftersom de flesta inkorgar visar animerade GIF:ar och mycket få spelar upp video. Allt annat i den här guiden är detaljer kring den regeln.

Vad varje format egentligen är

GIF är ett bildformat från slutet av 1980-talet som kan rymma flera bildrutor. Det lagrar varje bildruta med en palett på högst 256 färger och komprimerar varje ruta för sig. MP4 och WebM är videoformat. De använder moderna videokodekar, till exempel H.264 i MP4 och VP9 eller AV1 i WebM, som lagrar vad som ändras mellan rutorna i stället för varje ruta i sin helhet. För en loop där det mesta av bilden ändras långsamt är den skillnaden enorm.

Därför ser gradienter dåliga ut som GIF

En jämn gradient över en bildruta på 1080 pixlar kan använda tusentals olika färger. En GIF-ruta rymmer högst 256. Kodaren har två val: avrunda färgerna till den närmaste i paletten, vilket ger synliga ränder, eller strö ut pixlar i angränsande färger för att låtsas att mellantonerna finns, så kallad dithering, vilket ser prickigt ut och gör filerna större. Ingetdera ser ut som gradienten du designade.

Korn hjälper lite, eftersom brusiga bilder döljer palettens begränsningar bättre än rena. Men den verkliga lösningen är att inte använda GIF där video går att använda. Gradientbandning förklarar samma problem i stillbilder.

MP4 eller WebM för webbplatser

På en webbplats ersätter du GIF:ar med ett videoelement som beter sig som en GIF: det startar av sig självt, är ljudlöst, loopar och spelas inline. web.devs guide om att ersätta animerade GIF:ar med video förklarar tillvägagångssättet. Erbjud WebM först, eftersom det ofta är mindre, och MP4 som reserv som spelas nästan överallt.

<!-- 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>

Två andra format är värda att känna till. Animerad WebP och animerad AVIF är bildformat som används i en vanlig img-tagg som en GIF, men med full färg och mycket bättre komprimering. Moderna webbläsare stöder båda. De är praktiska där ett CMS eller en plattform bara tar emot bilder, men inte för mejl. För bakgrunder i full bredd, läs videobakgrunder på webbplatser.

Loopar för sociala medier

Sociala plattformar är byggda kring video, och MP4 är formatet de alla tar emot. Där en plattform tar emot en GIF-uppladdning hanterar den den ofta annorlunda än en vanlig video, så en GIF är sällan en fördel. Exportera din loop som MP4 i plattformens storlek, i H.264, och låt plattformen göra resten. Animerade inlägg eller statiska tar upp storlekar och inställningar.

Loopar i mejl: fortfarande GIF

De flesta mejlklienter spelar inte upp video, så en animerad GIF är det praktiska sättet att få in rörelse i ett mejl. Håll den liten och se första bildrutan som reserven: vissa klienter, bland annat vissa versioner av klassiska Outlook för Windows, visar bara första rutan. Lägg budskapet i den rutan så att inget går förlorat. Våra guider om design av mejlhuvuden och gradienter i mejl tar upp resten.

1. 1

   Håll den kort

   Två till sex sekunder räcker gott i ett mejl; varje bildruta ger extra vikt.

2. 2

   Minska storleken och bildfrekvensen

   Exportera i den bredd den visas i, ofta 600 pixlar, och med lägre bildfrekvens, till exempel 10 till 15 bilder per sekund, för långsam rörelse.

3. 3

   Lägg budskapet i första rutan

   Läsare som bara ser första rutan ska ändå förstå poängen.

4. 4

   Kontrollera filstorleken

   Stora GIF:ar laddas långsamt på telefoner. Om den är tung, korta ner längden, storleken eller antalet färger före allt annat.

Konvertera mellan GIF och MP4

ffmpeg, ett gratis kommandoradsverktyg, klarar båda riktningarna. Att göra en bra GIF av video kräver en anpassad palett som byggs från själva videon; att göra en GIF till MP4 är enklare.

# 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

Vilket format du ska använda, i korthet

Om du gör loopar i Gradiently exporterar Studion båda: en video (MP4 där din webbläsare kan spela in det, annars WebM) upp till 1080p, och en GIF med ett val av kvalitet som hålls under 15 MB. Se till att loopen går ihop rent vilken du än väljer; se sömlösa loopar.