Billedoptimering til web: WebP, AVIF, lazy loading og de bedste værktøjer

Billeder udgør typisk 50-80% af en hjemmesides samlede filstørrelse. Uoptimerede billeder er den hyppigste årsag til dårlige Core Web Vitals scores og langsom loadtid. En enkelt hero-billede i PNG på 3 MB kan alene forsinke din side med 2-4 sekunder på en gennemsnitlig mobilforbindelse.

Den gode nyhed: Billedoptimering er en af de hurtigste og mest effektfulde forbedringer du kan lave. Konvertering til moderne formater, korrekt dimensionering og lazy loading kan reducere billedfilstørrelsen med 50-80% uden synligt kvalitetstab. Denne guide dækker alt du behøver.

Billedformater i 2026: WebP, AVIF og JPEG

WebP: Det sikre standardvalg

WebP er Googles billedformat med ca. 97% global browser-understøttelse i 2026. Det understøtter både lossy og lossless komprimering, transparens (alpha-kanal) og animation.

Fordele: 25-35% mindre filstørrelse end JPEG ved sammenlignelig visuel kvalitet. Understøttet af alle moderne browsere inkl. Chrome, Firefox, Safari og Edge. Hurtig encoding.

Brug WebP som: Dit standardformat for alle fotografier og billeder på websitet. Det er den sikreste balance mellem komprimering og kompatibilitet.

AVIF: Maksimal komprimering

AVIF er baseret på AV1-codec'en og leverer den bedste komprimering af alle webformater i 2026. Ca. 93-95% global browser-understøttelse.

Fordele: 20-50% mindre filstørrelse end WebP ved sammenlignelig kvalitet. Understøtter HDR og wide color gamut. Ideel til fotografier med komplekse farver og gradienter.

Ulemper: Langsommere encoding-tid end WebP (ca. 5x langsommere). Lidt lavere browser-understøttelse end WebP. Ikke ideel til dynamisk billedgenerering i realtid.

Brug AVIF til: Hero-billeder, produktfotos og andre high-value billeder der ses af mange brugere. Encodingen sker én gang, besparelsen gælder for alle besøg.

JPEG: Kun som fallback

JPEG er det ældste format og understøttes overalt, men det producerer markant større filer end WebP og AVIF. Behold JPEG kun som fallback for de ca. 3% af browsere der ikke understøtter WebP.

PNG: Til grafik og logoer

PNG er stadig relevant for grafik, logoer og ikoner der kræver perfekt skarphed og transparens. Men for fotografier er WebP og AVIF altid bedre valg.

Formater sammenlignet

Picture-elementet: Servér det rigtige format automatisk

HTML <picture>-elementet lader browseren vælge det bedste format den understøtter. Du serverer AVIF til moderne browsere, WebP til næsten alle, og JPEG som sidste fallback:

<picture>
  <source srcset="billede.avif" type="image/avif">
  <source srcset="billede.webp" type="image/webp">
  <img src="billede.jpg" alt="Beskrivende alt-tekst" width="800" height="600" loading="lazy">
</picture>

Browseren prøver AVIF først, falder tilbage til WebP, og bruger JPEG kun hvis ingen af de moderne formater understøttes.

Lazy loading: Indlæs kun hvad der er synligt

Lazy loading betyder at billeder under folden (det brugeren ikke kan se uden at scrolle) først indlæses når brugeren nærmer sig dem. Det reducerer den initiale sideload markant.

I standard HTML

Tilføj loading="lazy" attributten til alle billeder der ikke er synlige ved første sidevisning:

<img src="billede.webp" alt="Beskrivelse" width="800" height="600" loading="lazy">

Vigtigt: Brug ALDRIG loading="lazy" på dit hero-billede eller andre billeder der er synlige "above the fold". De skal indlæses med det samme. Ifølge Googles dokumentation skal billeder i viewport ved initial load IKKE lazy-loades, da det forsinker LCP.

For hero-billeder, brug i stedet fetchpriority="high" for at fortælle browseren at dette billede har højeste prioritet:

<img src="hero.webp" alt="Hero billede" width="1200" height="600" fetchpriority="high">

WordPress har haft loading="lazy" indbygget siden version 5.5, så det virker automatisk. I Next.js håndterer next/image-komponenten lazy loading automatisk med priority-prop'en for hero-billeder.

Responsive images: Tilpas til skærmstørrelsen

En desktop-bruger med en 1920px skærm og en mobilbruger med en 375px skærm behøver ikke det samme billede. Responsive images sikrer at browseren downloader den rigtige størrelse.

I standard HTML med srcset

<img
  srcset="billede-400w.webp 400w, billede-800w.webp 800w, billede-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  src="billede-800w.webp"
  alt="Beskrivelse"
  width="1200"
  height="800"
  loading="lazy"
>

WordPress genererer automatisk flere billedstørrelser og bruger srcset i outputtet. I Next.js håndterer next/image responsive billeder automatisk.

Width og height: Forhindre CLS

Når browseren ikke kender et billedes dimensioner på forhånd, reserverer den ingen plads. Når billedet indlæses, "hopper" layoutet, og det forringer din CLS-score (Cumulative Layout Shift).

Løsningen er simpel: Angiv ALTID width og height attributter på alle <img> tags. Browseren bruger dem til at beregne aspect ratio og reservere den korrekte plads, selv før billedet er downloadet.

Både WordPress (via standard <img> output) og Next.js (via next/image der kræver width/height) understøtter dette. I WordPress genereres width og height automatisk ved upload, men tjek at dit tema ikke fjerner dem.

Alt-tekst: Tilgængelighed og SEO

Alt-tekst beskriver billedets indhold for skærmlæsere og søgemaskiner. God alt-tekst er beskrivende, konkret og inkluderer relevante søgeord naturligt.

Eksempler:

• ❌ alt="billede1" eller alt="" (tomt)
• ❌ alt="SEO billedoptimering web performance Core Web Vitals" (keyword stuffing)
• ✅ alt="Sammenligning af WebP og AVIF filstørrelser for et produktfoto"
• ✅ alt="PageSpeed Insights score på 98 for webworq.dk efter billedoptimering"

Dekorative billeder (baggrunde, dividers) der ikke tilføjer information bør have tomt alt: alt="". Skærmlæsere springer dem over.

Billedoptimering i WordPress

WordPress driver størstedelen af alle websites, men har ikke indbygget modern billedoptimering. Til gengæld er der stærke plugins der løser det.

Konvertering til WebP/AVIF

ShortPixel Image Optimizer (WordPress plugin) er et af de mest populære billedoptimeringsplugins med over 300.000 aktive installationer. Det komprimerer automatisk alle uploadede billeder og konverterer til WebP og AVIF. ShortPixel inkluderer også en indbygget CDN til hurtigere billedlevering globalt.

Andre solide alternativer er Imagify (WordPress plugin), som er bygget af teamet bag WP Rocket, og EWWW Image Optimizer (WordPress plugin), som tilbyder lokal komprimering uden cloud-afhængighed.

Vigtigt: Installér kun ét billedoptimeringsplugin. Flere plugins der arbejder på de samme billeder skaber konflikter og kan ødelægge billedkvaliteten.

Lazy loading

WordPress har haft indbygget loading="lazy" siden version 5.5 (2020). Det tilføjes automatisk på alle billeder. Men hero-billedet (typisk det største billede "above the fold") bør have fetchpriority="high" tilføjet manuelt i dit tema for at sikre at det indlæses med højeste prioritet.

Responsive billeder

WordPress genererer automatisk flere størrelser af uploadede billeder og bruger srcset i outputtet. Sørg for at dine definerede billedstørrelser i temaet matcher dit faktiske design, så browseren downloader den rigtige størrelse.

WordPress-specifik tjekliste

• Installér ShortPixel, Imagify eller EWWW (kun ét plugin)
• Aktivér automatisk WebP-konvertering i pluginets indstillinger
• Slet ubrugte billedstørrelser i dit tema for at reducere storage og processeringstid
• Tjek at loading="lazy" er aktivt (standard i WP 5.5+)
• Tilføj fetchpriority="high" på hero-billeder manuelt i temaet
• Overvej et CDN som Cloudflare til billedlevering

Billedoptimering i Next.js

Next.js' next/image komponent håndterer næsten alt automatisk:

• Automatisk konvertering til WebP/AVIF
• Automatisk responsive billedgenerering
• Automatisk lazy loading (undtagen priority-billeder)
• Kræver width og height, forhindrer CLS
• Automatisk cache-headers for optimal browser-caching

Det er en af de primære grunde til at Next.js-sider konsekvent scorer 90-100 i PageSpeed Insights uden ekstra optimering. Læs vores Next.js og headless CMS guide for den fulde sammenligning.

Tjekliste for billedoptimering

• Format: Alle fotografier i WebP (minimum) eller AVIF med WebP-fallback
• Dimensioner: width og height angivet på alle <img> tags
• Lazy loading: loading="lazy" på alle billeder under folden
• Hero-billede: fetchpriority="high", ALDRIG lazy-loaded
• Responsive: srcset og sizes eller next/image for automatisk tilpasning
• Alt-tekst: Beskrivende, konkret, med naturlige søgeord. Tom for dekorative billeder
• Filstørrelse: Maks 200 KB for de fleste billeder, maks 500 KB for hero-billeder
• CDN: Server billeder fra et CDN (f.eks. Cloudflare eller Vercel) for hurtigere levering globalt

Ofte stillede spørgsmål

Hvilket billedformat er bedst til web i 2026?

WebP er det sikreste valg med ca. 97% browser-understøttelse og 25-35% mindre filstørrelse end JPEG. AVIF giver endnu bedre komprimering (20-50% mindre end WebP) med ca. 93-95% browser-understøttelse. Den anbefalede tilgang er at servere AVIF som primært format med WebP som fallback via HTML <picture>-elementet.

Hvad er lazy loading, og hvorfor er det vigtigt?

Lazy loading forsinker indlæsning af billeder der ikke er synlige i brugerens viewport. I stedet for at downloade alle billeder på én gang, indlæses de først når brugeren scroller ned til dem. Det reducerer initial loadtid markant og forbedrer LCP (Largest Contentful Paint). I HTML tilføjer du loading="lazy" på img-tags. I Next.js er lazy loading standard for next/image.

Hvordan påvirker billeder Core Web Vitals?

Billeder påvirker to af tre Core Web Vitals direkte. LCP (loadhastighed) forringes af store, uoptimerede billeder der er langsomme at downloade. CLS (visuel stabilitet) forringes af billeder uden angivne width/height-dimensioner, som får layoutet til at hoppe når billedet indlæses. Optimerede billeder i WebP/AVIF med korrekte dimensioner løser begge problemer.

Hvad gør next/image i Next.js?

next/image er Next.js' indbyggede billedkomponent der automatisk optimerer billeder: konverterer til WebP/AVIF, tilpasser størrelsen til brugerens skærm, lazy-loader billeder under folden, og tilføjer width/height for at forhindre CLS. Det er en af de vigtigste performance-fordele ved Next.js sammenlignet med traditionelle platforme.

Konklusion: Start med formatkonvertering

Billedoptimering giver den hurtigste performance-forbedring af alle SEO-tiltag. Start med at konvertere dine billeder til WebP, tilføj width/height attributter, og implementér lazy loading. De tre trin alene kan reducere din sides loadtid med 30-50%.

Hos Webworq bygger vi alle websites med automatisk billedoptimering som standard. Kontakt os for en uforpligtende snak om din hjemmesides performance, eller se vores website services.

Se også: Core Web Vitals guide | Next.js og headless CMS guide | On-page SEO guide