GIF eller MP4 eller WebM: vælg format til loops

GIF eller MP4 afgøres af, hvor loopet skal afspilles. På hjemmesider og sociale medier er MP4 og det åbne alternativ WebM næsten altid det rigtige valg: filerne er normalt langt mindre, farverne er glatte, og afspilningen er effektiv. GIF er stadig det rette valg ét sted, nemlig e-mail, fordi de fleste indbakker viser animerede GIF’er, og meget få afspiller video. Resten af denne guide uddyber den regel.

Det er de forskellige formater

GIF er et billedformat fra slutningen af 1980’erne, som kan rumme flere billeder. Det gemmer hvert billede med en palet på højst 256 farver og komprimerer billederne hver for sig. MP4 og WebM er videoformater. De bruger moderne videocodecs som H.264 i MP4 og VP9 eller AV1 i WebM, som gemmer ændringerne mellem billeder frem for hvert billede i sin helhed. For et loop, hvor det meste ændrer sig langsomt, er forskellen enorm.

Derfor ser gradienter dårlige ud som GIF

En glat gradient hen over et billede på 1080 pixels kan bruge tusindvis af forskellige farver. Et GIF-billede kan højst rumme 256. Encoderen har to valg: afrunde farverne til den nærmeste i paletten, hvilket giver synlige striber, eller sprede pixels med nabofarver for at efterligne mellemtoner. Det sidste kaldes dithering, ser plettet ud og gør filerne større. Ingen af delene ligner den gradient, du designede.

Korn hjælper lidt, fordi støjende billeder skjuler palettens begrænsninger bedre end rene. Den egentlige løsning er dog at undgå GIF, hvor video er mulig. Farvebånd i gradienter forklarer samme problem i stillbilleder.

MP4 eller WebM til hjemmesider

På en hjemmeside kan du erstatte GIF med et videoelement, der opfører sig tilsvarende: automatisk afspilning, lydløs, gentaget og direkte på siden. Vejledningen fra web.dev om at erstatte animerede GIF’er med video forklarer metoden. Tilbyd WebM først, fordi det ofte er mindre, og MP4 som reserve, der afspilles næsten overalt.

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

To andre formater er gode at kende. Animeret WebP og animeret AVIF er billedformater, der bruges i et almindeligt img-tag ligesom GIF, men med alle farver og langt bedre komprimering. Moderne browsere understøtter begge. De er praktiske, når et CMS eller en platform kun accepterer billeder, men ikke til e-mail. Læs videobaggrunde på hjemmesider for baggrunde i fuld bredde.

Loops til sociale medier

Sociale platforme er bygget op omkring video, og MP4 er formatet, de alle accepterer. Når en platform accepterer GIF-upload, håndterer den det ofte anderledes end en almindelig video, så GIF er sjældent en fordel. Eksportér dit loop som MP4 i platformens størrelse med H.264, og lad platformen klare resten. Animerede eller statiske opslag gennemgår størrelser og indstillinger.

Loops i e-mail: stadig GIF

De fleste mailklienter afspiller ikke video, så en animeret GIF er den praktiske vej til bevægelse i en e-mail. Hold den lille, og brug første billede som reserve: nogle klienter, herunder visse versioner af klassisk Outlook til Windows, viser kun første billede. Placér budskabet dér, så intet går tabt. Vores guider til design af e-mailbanner og gradienter i e-mails gennemgår resten.

1. 1

   Hold den kort

   To til seks sekunder er rigeligt i en e-mail. Hvert billede øger filstørrelsen.

2. 2

   Sænk størrelse og billedhastighed

   Eksportér i visningsbredden, ofte 600 pixels, og med lavere billedhastighed, for eksempel 10 til 15 billeder pr. sekund til langsom bevægelse.

3. 3

   Placér budskabet i første billede

   Læsere, der kun ser første billede, skal stadig forstå pointen.

4. 4

   Tjek filstørrelsen

   Store GIF’er indlæses langsomt på telefoner. Er filen tung, så skær først i varighed, størrelse eller farver.

Konvertér mellem GIF og MP4

ffmpeg, et gratis kommandolinjeværktøj, klarer begge retninger. En god GIF fra video kræver en særlig palet bygget ud fra selve videoen. At lave GIF om til MP4 er enklere.

# 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

Formatvalg i overblik

Laver du loops i Gradiently, eksporterer studiet begge dele: video som MP4, hvor browseren kan optage det, ellers WebM, op til 1080p, og GIF med valg af kvalitet og en grænse på 15 MB. Sørg for en ren samling i loopet, uanset hvad du vælger. Se sømløse loops.