GIF vs MP4 vs WebM: hvilket format passer til løkker?

GIF vs MP4 avgjøres av hvor løkken skal spilles. På nettsider og i sosiale medier er MP4 (og det åpne slektningsformatet WebM) nesten alltid riktig valg: filene er vanligvis langt mindre, fargene jevne og avspillingen effektiv. GIF er fortsatt riktig ett sted, i e-post, fordi de fleste innbokser viser animerte GIF-er og svært få spiller video. Resten av denne guiden utdyper den regelen.

Hva hvert format faktisk er

GIF er et bildeformat fra slutten av 1980-tallet som kan inneholde flere bilder. Det lagrer hvert bilde med en palett på høyst 256 farger og komprimerer hvert bilde for seg. MP4 og WebM er videoformater. De bruker moderne videokodeker, som H.264 i MP4 og VP9 eller AV1 i WebM, som lagrer endringene mellom bilder fremfor hvert bilde i sin helhet. For en løkke der det meste av bildet endres langsomt, er forskjellen enorm.

Hvorfor gradienter ser dårlige ut som GIF

En jevn gradient over et bilde på 1080 piksler kan bruke tusenvis av ulike farger. Et GIF-bilde kan inneholde høyst 256. Koderen har to valg: runde fargene til nærmeste farge i paletten, noe som gir synlige striper, eller spre piksler med nabofarger for å etterligne mellomtonene. Det siste kalles dithering og ser prikkete ut, samtidig som filene blir større. Ingen av delene ligner gradienten du designet.

Korn hjelper litt, fordi bilder med støy skjuler palettbegrensninger bedre enn rene bilder. Men den egentlige løsningen er å unngå GIF der video er mulig. Fargebånd i gradienter forklarer det samme problemet i stillbilder.

MP4 eller WebM til nettsider

På en nettside erstatter du GIF-er med et videoelement som oppfører seg likt: automatisk avspilling, dempet lyd, løkke og avspilling inne i siden. Guiden på web.dev til å erstatte animerte GIF-er med video forklarer metoden. Tilby WebM først, siden det ofte er mindre, og MP4 som reserveformatet som spilles nesten 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 verdt å kjenne. Animert WebP og animert AVIF er bildeformater som brukes i en vanlig img-tagg som GIF, men med full farge og langt bedre komprimering. Moderne nettlesere støtter begge. De er nyttige der et publiseringssystem eller en plattform bare godtar bilder, men ikke til e-post. For bakgrunner i full bredde, les videobakgrunner på nettsider.

Løkker for sosiale medier

Sosiale plattformer er bygget rundt video, og MP4 er formatet alle godtar. Der en plattform tar imot GIF, behandler den det ofte annerledes enn vanlig video, så GIF gir sjelden en fordel. Eksporter løkken som MP4 i plattformens størrelse, med H.264, og la plattformen gjøre resten. Animerte eller statiske innlegg dekker størrelser og innstillinger.

Løkker i e-post: fortsatt GIF

De fleste e-postklienter spiller ikke video, så en animert GIF er den praktiske måten å få bevegelse inn i en e-post. Hold den liten og la første bilde fungere som reserve: noen klienter, blant annet enkelte versjoner av klassisk Outlook for Windows, viser bare første bilde. Legg budskapet der så ingenting går tapt. Guidene til design av toppbilder til e-post og gradienter i e-post dekker resten.

1. 1

   Hold den kort

   To til seks sekunder er rikelig i en e-post; hvert bilde øker filstørrelsen.

2. 2

   Reduser størrelsen og bildefrekvensen

   Eksporter i bredden den vises i, ofte 600 piksler, og med lavere bildefrekvens, som 10 til 15 bilder per sekund for langsom bevegelse.

3. 3

   Legg budskapet i første bilde

   Lesere som bare ser første bilde, bør fortsatt forstå poenget.

4. 4

   Sjekk filstørrelsen

   Store GIF-er lastes tregt på telefoner. Er filen tung, kutt først lengde, størrelse eller farger.

Konverter mellom GIF og MP4

ffmpeg, et gratis kommandolinjeverktøy, håndterer begge retninger. Å gjøre video til en god GIF krever en tilpasset palett bygget fra selve videoen; å gjøre GIF 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

Velg format med ett blikk

Lager du løkker i Gradiently, eksporterer Studio begge deler: video (MP4 der nettleseren kan ta det opp, ellers WebM) opptil 1080p, og GIF med valgbar kvalitet som holdes under 15 MB. Sørg for at løkken har en ren overgang uansett hvilket du velger; se sømløse løkker.