PricingLoginStart free
HTML Academy · Lektion

Responsive billeder med srcset og sizes

Servér billeder i passende størrelser til forskellige skærmtætheder.

Lektion 2 af 414 trin

Responsive billeder med srcset og sizes er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.

Problemet med enkeltstående billeder

Ét stort billede, der leveres til alle enheder, spilder båndbredde på små skærme:

  • En telefon med en skærm på 390 px har ikke brug for et billede på 2400 px
  • En 4K-skærm fortjener et billede med højere opløsning end 96 dpi
  • Responsive billeder leverer det rigtige billede til den rigtige skærm

Attributten srcset

srcset indeholder en liste over billedkilder med deres bredder:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Beskrivelser af pixeltæthed

Brug beskrivelserne 1x, 2x og 3x til billeder med fast størrelse i forskellige opløsninger:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

Attributten sizes

sizes fortæller browseren, hvor bredt billedet vises ved forskellige visningsområdestørrelser:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Sådan vælger browseren et billede

Browseren beregner: sizes-værdi × enhedens pixelforhold for at vælge fra srcset:

  • Visningsområde på 600 px, 2× DPR, size=100vw → kræver et billede på 1200 px → vælger 1600w
  • Visningsområde på 1200 px, 1× DPR, size=50vw → kræver et billede på 600 px → vælger 800w
  • Når billedet er indlæst, cacher browseren det og indlæser det muligvis ikke igen

Standardværdien for sizes

Uden sizes antager browseren, at billedet fylder hele visningsområdets bredde (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Breddebeskrivelser kontra x-beskrivelser i srcset

To tilstande for srcset:

  • Breddebeskrivelser (w) — med sizes: flydende og layoutbevidst valg
  • Pixeltæthedsbeskrivelser (x) — billeder med fast størrelse i flere opløsninger

Brug w-beskrivelser til de fleste responsive billeder. Brug x til ikoner, logoer og elementer med fast størrelse.

Generering af srcset-filer

Værktøjer, der genererer responsive billedvarianter:

  • Sharp (Node.js) — programmatisk ændring af billedstørrelse
  • Squoosh — browserbaseret visuel sammenligning
  • Cloudinary / Imgix — URL-baseret ændring af størrelse efter behov
  • Webpack / Vite-plugins — generering under bygning

srcset med WebP og reserve

Kombiner srcset med <picture> for at angive en formatreserve:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Kunstnerisk tilpasning kontra skift af opløsning

To typer problemer med responsive billeder:

  • Skift af opløsning — samme billede i forskellige opløsninger → brug srcset + sizes
  • Kunstnerisk tilpasning — forskellig beskæring eller komposition på forskellige skærme → brug <picture> med <source media>

Test af responsive billeder

Sådan kontrollerer du, at srcset fungerer:

  • Åbn DevTools → fanen Netværk → filtrer efter Billeder
  • Indstil enhedssimuleringen til forskellige visningsområdestørrelser og DPR-værdier
  • Genindlæs siden — kontrollér, hvilken fil browseren anmoder om
  • Kontrollér også: Lighthouse → Ydeevne → kontrollen Korrekt dimensionerede billeder

Browserunderstøttelse af srcset

Understøttelsen af srcset i browsere er fremragende:

  • Understøttes i alle moderne browsere (Chrome, Firefox, Safari og Edge)
  • Reserveværdien i src håndterer gamle browsere
  • Der kræves ingen polyfill til brug i produktion

Hurtig test

Hvad fortæller attributten sizes browseren?

Besvar den i den interaktive lektion

Opsummering: srcset og sizes

Det vigtigste om responsive billeder:

  • srcset — en liste over billedfiler med deres naturlige bredder eller pixeltætheder
  • sizes — mediebetingelser, der beskriver, hvor bredt billedet vises
  • Browseren vælger det bedste match: sizes-værdi × enhedens DPR
  • Breddebeskrivelser (w) til flydende billeder; x til elementer med fast størrelse
  • Angiv altid src som reserve
Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
40
Lektioner
159
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Responsive billeder med srcset og sizes” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Responsive billeder med srcset og sizes”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Responsive billeder med srcset og sizes”?

Servér billeder i passende størrelser til forskellige skærmtætheder. Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML Academy?

Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Responsive billeder med srcset og sizes”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML Academy-lektion?

Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Elementet img: src, alt, width og height
  2. Responsive billeder med srcset og sizes
  3. Elementet picture til art direction
  4. figure og figcaption
← Tilbage til HTML Academy