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

[Canonical HTML page](https://gradiently.design/nb/guide/gif-vs-mp4)

GIF er formatet alle kjenner og nesten ingen bør bruke på nett. Det er også det eneste som fungerer i en innboks. Her er hva du bør velge, hvor og hvorfor.

## The short version

- På nettsider og i sosiale medier er MP4 og WebM vanligvis mye mindre enn GIF for samme løkke og viser jevne farger.
- GIF kan vise høyst 256 farger i hvert bilde, noe som gir gradienter fargebånd eller et prikkete uttrykk.
- GIF er fortsatt det praktiske valget for animasjon i e-post, fordi de fleste e-postklienter ikke spiller video.
- WebM er ofte mindre enn MP4, men MP4 spilles nesten overalt, så nettsider tilbyr ofte begge.
- Animert WebP og AVIF er moderne bildeformater som erstatter GIF på nettsider, men de er ikke et trygt valg for e-post.

**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.

| Egenskap | GIF | MP4 | WebM |
| --- | --- | --- | --- |
| Farger | Opptil 256 per bilde | Millioner | Millioner |
| Filstørrelse for en løkke | Størst | Liten | Ofte minst |
| Gjennomsiktighet | Av eller på per piksel, ingen myke kanter | Nei | Ja, i noen nettlesere |
| Lyd | Nei | Ja | Ja |
| Nettsider | Ja, som bilde | Ja, som video | Ja, i moderne nettlesere |
| E-post | De fleste klienter | Sjelden | Sjelden |
| Opplasting i sosiale medier | Varierer med plattformen | Overalt | Noen plattformer |

Hovedbildet. Støtten på bestemte plattformer og i innbokser endres, så sjekk stedet du skal publisere.

## 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.

- Jevn: som designet: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Trinnvis: for få farger: `linear-gradient(90deg, #1e1b4b 0% 12.5%, #36207a 12.5% 25%, #4f24a7 25% 37.5%, #6d28d9 37.5% 50%, #8e3bd0 50% 62.5%, #b04ec6 62.5% 75%, #d261bd 75% 87.5%, #f472b6 87.5% 100%)`

En overdrevet visning av hva en begrenset palett gjør med en gradient. Ekte GIF-er har flere trinn, men på mørke, subtile gradienter synes båndene fortsatt.

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](https://gradiently.design/nb/guide/gradient-banding) 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](https://web.dev/articles/replace-gifs-with-videos) forklarer metoden. Tilby WebM først, siden det ofte er mindre, og MP4 som reserveformatet som spilles nesten overalt.

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

En video som oppfører seg som en GIF. Bredde og høyde hindrer at oppsettet hopper mens den lastes.

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](https://gradiently.design/nb/guide/video-background-website).

## 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](https://gradiently.design/nb/guide/animated-social-posts) 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](https://gradiently.design/nb/guide/email-header-design) og [gradienter i e-post](https://gradiently.design/nb/guide/gradients-in-email) dekker resten.

1. **Hold den kort** To til seks sekunder er rikelig i en e-post; hvert bilde øker filstørrelsen.
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. **Legg budskapet i første bilde** Lesere som bare ser første bilde, bør fortsatt forstå poenget.
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.

```bash
# 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
```

`palettegen` og `paletteuse` velger de 256 fargene som passer dette klippet, noe som er den største enkeltforbedringen av GIF-kvalitet.

## Velg format med ett blikk

| Hvor den spilles | Bruk | Hvorfor |
| --- | --- | --- |
| Toppfelt eller bakgrunn på nettside | WebM med MP4 som reserve | Minst filer, jevne farger |
| Animasjon inne i en artikkel | MP4-video eller animert WebP | Langt lettere enn GIF |
| Instagram, TikTok, LinkedIn, X | MP4 (H.264) | Det plattformene forventer |
| E-post | GIF | Animasjonen de fleste innbokser viser |
| Chatteapper og klistremerker | Det appen ber om | Hver app har sine egne regler |

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](https://gradiently.design/nb/guide/seamless-loop-video).

## FAQ

### Er MP4 bedre enn GIF?

For nettsider og sosiale medier, ja: MP4-filer er vanligvis langt mindre og viser jevne farger, mens GIF er begrenset til 256 farger per bilde. GIF er fortsatt det beste valget til e-post.

### Hvorfor ser gradient-GIF-ene mine stripete ut?

GIF kan ha høyst 256 farger per bilde, så jevne gradienter rundes av til bånd eller gjøres prikkete med dithering. Bruk video der du kan, eller bygg en tilpasset palett ved eksport.

### Bør jeg bruke WebM eller MP4?

På nettsider tilbyr du WebM først fordi det ofte er mindre, med MP4 som reserve fordi det spilles nesten overalt. Bruk MP4 ved opplasting i sosiale medier.

### Kan jeg legge en video i en e-post?

Svært få e-postklienter spiller video. Bruk en animert GIF, hold den liten og sørg for at første bilde bærer budskapet, siden noen klienter bare viser det bildet.

### Hva er animert WebP?

Det er et bildeformat som kan inneholde animasjon med full farge og bedre komprimering enn GIF. Moderne nettlesere støtter det, men e-postklienter gjør som regel ikke det.