Responsive images — srcset, sizes og art direction

Responsive images er HTML-teknikken der serverer det optimale billede til hver brugers enhed baseret på skærmstørrelse, pixel density og forbindelseshastighed. En 1200px bred JPEG på 250 KB serveret til en mobilskærm på 390px er 300% over hvad der er nødvendigt — og den unødvendige download-tid rammer direkte LCP. For SEO er responsive images et af de mest impactfulde performance-optimeringer fordi billeder typisk er det primære LCP-element.

srcset og sizes — resolution switching

srcset angiver de tilgængelige billedvarianter med deres bredde. sizes fortæller browseren hvor bred billedet vises ved forskellige viewports:

<img
  src="billede-800.webp"
  srcset="
    billede-400.webp  400w,
    billede-800.webp  800w,
    billede-1200.webp 1200w,
    billede-1600.webp 1600w
  "
  sizes="
    (max-width: 480px) 100vw,
    (max-width: 768px) 90vw,
    760px
  "
  alt="Beskrivelse"
  width="800"
  height="533"
>

Hvad sker der: En mobiltelefon med 390px viewport og 2x DPR beregner at den har brug for 780px effektive pixels og vælger billede-800.webp. En desktop med 1440px viewport og 1x DPR ser at billedet vises i 760px og vælger billede-800.webp. En desktop med 2x DPR vælger billede-1600.webp.

src er fallback for browsere der ikke understøtter srcset (alle moderne browsere understøtter det).

picture — art direction og format-switching

<picture> bruges når motivet skal beskæres forskelligt ved forskellige skærmstørrelser, eller til at servere moderne formater med fallback:

<!-- Format-switching: AVIF → WebP → JPEG -->
<picture>
  <source
    type="image/avif"
    srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <img src="hero-1200.jpg" alt="Hero" width="1200" height="630">
</picture>

<!-- Art direction: portrait på mobil, landscape på desktop -->
<picture>
  <source
    media="(min-width: 768px)"
    srcset="person-landscape.webp"
    width="1200" height="500"
  >
  <img
    src="person-portrait.webp"
    alt="Person"
    width="400" height="600"
  >
</picture>

width og height er obligatoriske

width og height-attributter på <img> er ikke valgfrie fra et performance-perspektiv. Browseren bruger dem til at beregne aspect ratio og reservere plads i layoutet inden billedet er downloadet — det eliminerer CLS (Cumulative Layout Shift).

<!-- Dårligt — layout shift ved indlæsning -->
<img src="billede.webp" alt="...">

<!-- Godt — browseren reserverer pladsen -->
<img src="billede.webp" alt="..." width="800" height="533">

CSS kan stadig kontrollere billedets visuelle størrelse — width-attributten er kun en hint til layout-beregning.

LCP-billede: fetchpriority

Det primære LCP-billede skal aldrig være lazy-loaded og bør have fetchpriority="high":

<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="100vw"
  fetchpriority="high"
  alt="Hero"
  width="1200"
  height="630"
>

Billeder under fold bruges loading="lazy" — de downloades kun når de er ved at blive synlige.

Generering af billedvarianter

Moderne frameworks og build-tools genererer srcset-varianter automatisk:

• Astro: <Image> komponenten genererer WebP og srcset automatisk
• Next.js: <Image> komponenten med automatisk optimering og CDN-levering
• Sharp (Node.js): Manuel billedresizing i build-scripts → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.