Billedoptimering — Formater, størrelser og SEO
Billeder er typisk 50-70% af en sides samlede filstørrelse. WebP og AVIF, responsive srcset og lazy loading er de tre primære optimeringer der direkte påvirker LCP.
Billeder er typisk 50-70% af en sides samlede overførsels-størrelse — og den ressource der oftest er mindst optimeret. En side med et 3MB hero-billede i JPEG, indlæst synkront, er et direkte LCP-problem der ikke kan løses med JavaScript-optimering. Billedoptimering med moderne formater som WebP og AVIF, responsive srcset og korrekt lazy loading er de mest effektive enkelt-indsatser for at forbedre Core Web Vitals og Googles vurdering af sideperformance.
Format: WebP og AVIF
JPEG og PNG er fortsat udbredte, men begge formater er teknisk forældet til moderne weboptimering. To formater dominerer i dag:
WebP komprimerer 25-35% bedre end JPEG ved sammenlignelig kvalitet og understøtter transparency som PNG. Det er kompatibelt med alle moderne browsere og bør bruges som standardformat for fotografier og komplekse billeder.
AVIF er næste generation — typisk 50% mindre end JPEG ved samme perceptuelle kvalitet. AVIF bruger mere CPU til komprimering og dekomp, men browser-supporten er bred i 2026. For nye projekter er AVIF det foretrukne format; WebP fungerer som fallback via <picture>-elementet.
<picture>
<source srcset="billede.avif" type="image/avif">
<source srcset="billede.webp" type="image/webp">
<img src="billede.jpg" alt="beskrivelse">
</picture>Responsive billeder med srcset
Et billede i 2400px bredde indlæst på en mobiltelefon med 390px viewport er 6× større end nødvendigt. srcset og sizes løser det ved at lade browseren vælge den mindst nødvendige version.
<img
src="billede-800.webp"
srcset="billede-400.webp 400w, billede-800.webp 800w, billede-1600.webp 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="beskrivelse"
>Browseren downloader kun den version der matcher viewportbredden. Mobilbrugere sparer 70-80% på billeddownload.
LCP-billeder og preload
LCP-elementet — typisk hero-billedet — bør ikke lazy-loades. Det er det modsatte af hvad du vil: hero-billedet skal indlæses så hurtigt som muligt. Lazy loading af LCP-elementet er en hyppig fejl der forklarer en stor del af dårlige LCP-scores.
For LCP-billedet bør du tilføje en preload-hint i <head>:
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">Det instruerer browseren i at hente billedet med høj prioritet — inden CSS og JavaScript er færdig-parseret.
Alt-tekst og billedsøgning
Alt-tekst (alt-attributten) er ikke kun accessibility — det er det primære signal til Google Billeder om hvad et billede indeholder. Et billede uden alt-tekst er usynligt i billedsøgning og bidrager ikke med semantisk kontekst til siden.
Skriv beskrivende alt-tekst der beskriver billedets indhold præcist. Undgå keyword stuffing — men undgå også generiske værdier som “billede” eller tomme alt-attributter på indholdsrige billeder. Tomme alt-attributter er korrekte for dekorative billeder der ikke bærer indhold. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.
Andre artikler i samme emne
- Animation performance — Frame rate og jank-fri bevægelse
- Browser rendering pipeline — Fra HTML til pixels
- CLS-problemer — Årsager til Cumulative Layout Shift og løsninger
- Core Web Vitals — LCP, INP og CLS forklaret
- CSS — Cascading Style Sheets og SEO
- CSS containment — Isolér rendering og accelerér layout
- Font-optimering — Webfonts, FOUT og SEO
- HTTP/2 og HTTP/3 — Protokoller der eliminerer latency-overhead
- INP-optimering — Interaction to Next Paint og Core Web Vitals
- JavaScript bundle-optimering — Code splitting, tree shaking og analyse
- Kritisk renderingsti — Hvad browseren gør før du ser noget
- Latency — Forsinkelse i netværket og hvad du kan gøre ved det
- Lazy loading — Udskyd indlæsning af billeder og ressourcer
- LCP-optimering — Sådan forbedrer du Largest Contentful Paint
- Long Tasks og LoAF — Hvad blokerer main thread
- Navigation og resource timings — Browserens performance-API
- PageSpeed og SEO — Hastighed som rankingfaktor
- Performance budgets — Grænser der forhindrer regressioner
- Performance timings — Hvornår er det for langsomt?
- Resource hints — Preload, prefetch og preconnect til SEO
- Responsive images — srcset, sizes og art direction
- Responsivt design — Mobile-first og SEO
- RUM vs. syntetisk monitoring — To syn på web performance
- Service Workers — Offline caching og PWA performance
- Speculative loading — Prefetch og prerender af næste side
- Startup performance — Hurtig app-start og time to interactive
- Tredjeparts-scripts og performance — Impact og strategier
- Tredjepartsscripts — Analytics, ads og performance-konsekvenser
- TTFB og hosting — Server response time og SEO
- Video performance — Lazy loading, formater og indlæsningsstrategi
- Viewport tag — Meta viewport og mobil-rendering
- Web Workers — Parallel JavaScript uden main thread-blokning
Ofte stillede spørgsmål
- Hvad er forskellen på WebP og AVIF?
- WebP er Googles billedformat fra 2010 — typisk 25-35% mindre end JPEG ved samme kvalitet. AVIF er nyere (2020) og komprimerer endnu bedre — typisk 50% mindre end JPEG. AVIF har bred browsersupport i 2026 og er det foretrukne format til nye implementeringer. WebP er stadig relevant som fallback til ældre browsere.
- Påvirker billeder LCP direkte?
- Ja. LCP-elementet er det største synlige element — og det er typisk et billede. Et hero-billede der er for stort, i forkert format eller ikke preloaded er den hyppigste årsag til dårlig LCP. Billedoptimering af LCP-elementet er den mest direkte vej til bedre LCP-score.
- Hvad er srcset og sizes?
- srcset er HTML-attributten der angiver flere billedversioner ved forskellige opløsninger. sizes fortæller browseren hvilken version der passer til den aktuelle viewport. Kombineret lader de browseren vælge den mindst nødvendige version — en mobilbruger downloader ikke et 2000px-billede beregnet til desktop.
- Hvad er fetchpriority=high og hvornår skal det bruges?
- fetchpriority=high er en HTML-attribut der signalerer til browseren at en ressource skal prioriteres over andre downloads. Det bør sættes på LCP-billedet for at sikre tidlig opdagelse og download. Det er særligt vigtigt på sider hvor LCP-billedet er defineret i CSS som background-image, eller hvor browseren ellers ikke opdager det tidligt nok under parsing. Kombiner med preload i head for maksimal LCP-forbedring.
- Hvad er alt-attributten på billeder og hvad er dens SEO-rolle?
- Alt-attributten er Googles primære signal for at forstå billedets indhold. Uden alt-tekst er billedet usynligt for Google Billeder-indeksering og for skærmlæsere. Beskriv hvad billedet faktisk viser, inkluder naturligt det primære søgeord hvis det er relevant for billedet, og undgå keyword-stuffing. Dekorative billeder der ikke bærer indholdsmæssig mening bør have tom alt-attribut (alt='') for at signalere til skærmlæsere at billedet kan ignoreres.
Placering i ordbogen
- Animation performance — Frame rate og jank-fri bevægelse
- Browser rendering pipeline — Fra HTML til pixels
- CLS-problemer — Årsager til Cumulative Layout Shift og løsninger
- Core Web Vitals — LCP, INP og CLS forklaret
- CSS — Cascading Style Sheets og SEO
- CSS containment — Isolér rendering og accelerér layout
- Font-optimering — Webfonts, FOUT og SEO
- HTTP/2 og HTTP/3 — Protokoller der eliminerer latency-overhead
- INP-optimering — Interaction to Next Paint og Core Web Vitals
- JavaScript bundle-optimering — Code splitting, tree shaking og analyse
- Kritisk renderingsti — Hvad browseren gør før du ser noget
- Latency — Forsinkelse i netværket og hvad du kan gøre ved det
- Lazy loading — Udskyd indlæsning af billeder og ressourcer
- LCP-optimering — Sådan forbedrer du Largest Contentful Paint
- Long Tasks og LoAF — Hvad blokerer main thread
- Navigation og resource timings — Browserens performance-API
- PageSpeed og SEO — Hastighed som rankingfaktor
- Performance budgets — Grænser der forhindrer regressioner
- Performance timings — Hvornår er det for langsomt?
- Resource hints — Preload, prefetch og preconnect til SEO
- Responsive images — srcset, sizes og art direction
- Responsivt design — Mobile-first og SEO
- RUM vs. syntetisk monitoring — To syn på web performance
- Service Workers — Offline caching og PWA performance
- Speculative loading — Prefetch og prerender af næste side
- Startup performance — Hurtig app-start og time to interactive
- Tredjeparts-scripts og performance — Impact og strategier
- Tredjepartsscripts — Analytics, ads og performance-konsekvenser
- TTFB og hosting — Server response time og SEO
- Video performance — Lazy loading, formater og indlæsningsstrategi
- Viewport tag — Meta viewport og mobil-rendering
- Web Workers — Parallel JavaScript uden main thread-blokning