HTML Academy · Lektion

Responsiva bilder med srcset och sizes

Visa bilder i lämplig storlek för olika skärmtätheter.

Lektion 2 av 414 steg

Responsiva bilder med srcset och sizes är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

Problemet med enstaka bilder

En enda stor bild som skickas till alla enheter slösar bandbredd på små skärmar:

En telefon med en skärm på 390px behöver inte en bild på 2400px
En 4K-skärm förtjänar en bild med högre upplösning än 96dpi
Responsiva bilder levererar rätt bild för rätt skärm

Attributet srcset

srcset innehåller en lista över bildkällor med deras 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 -->

Pixeldensitetsbeskrivningar

Använd beskrivningarna 1x, 2x och 3x för bilder med fast storlek i olika upplösningar:

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

Attributet sizes

sizes talar om för webbläsaren hur bred bilden kommer att visas vid olika viewportstorlekar:

<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å väljer webbläsaren en bild

Webbläsaren beräknar: värdet för sizes × enhetens pixeldensitet för att välja från srcset:

Viewport på 600px, 2× DPR, size=100vw → behöver en bild på 1200px → väljer 1600w
Viewport på 1200px, 1× DPR, size=50vw → behöver en bild på 600px → väljer 800w
När bilden har lästs in cachar webbläsaren den och kanske inte läser in den igen

Standardvärdet för sizes

Utan sizes antar webbläsaren att bilden tar upp hela viewportens bredd (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"
>

Breddbeskrivningar kontra x-beskrivningar i srcset

Det finns två lägen för srcset:

Breddbeskrivningar (w) — med sizes: flytande och layoutanpassat urval
Pixeldensitetsbeskrivningar (x) — bilder med fast storlek i flera upplösningar

Använd w-beskrivningar för de flesta responsiva bilder. Använd x för ikoner, logotyper och element med fast storlek.

Generera srcset-filer

Verktyg som genererar responsiva bildvarianter:

Sharp (Node.js) — programmatisk storleksändring av bilder
Squoosh — webbläsarbaserat, med visuell jämförelse
Cloudinary / Imgix — storleksändring vid behov via URL
Webpack / Vite plugins — generering vid byggtid

srcset med WebP och reservformat

Kombinera srcset med <picture> för reservformat:

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

Art direction kontra upplösningsväxling

Det finns två typer av problem med responsiva bilder:

Upplösningsväxling — samma bild i olika upplösningar → använd srcset + sizes
Art direction — olika beskärning eller komposition på olika skärmar → använd <picture> med <source media>

Testa responsiva bilder

Så kontrollerar du att srcset fungerar:

Öppna DevTools → fliken Network → filtrera på Images
Ställ in enhetsemulering för olika viewportstorlekar och DPR-värden
Läs in sidan igen — kontrollera vilken fil webbläsaren begär
Kontrollera även Lighthouse → Performance → granskningen Properly sized images

Webbläsarstöd för srcset

Stödet för srcset är utmärkt:

Stöds i alla moderna webbläsare, inklusive Chrome, Firefox, Safari och Edge
Reservvärdet src hanterar äldre webbläsare
Ingen polyfill behövs i produktionsmiljö

Snabb kontroll

Vad talar attributet sizes om för webbläsaren?

Besvara frågan i den interaktiva lektionen

Sammanfattning: srcset och sizes

Det viktigaste om responsiva bilder:

srcset — lista över bildfiler med deras ursprungliga bredder eller pixeldensiteter
sizes — medievillkor som beskriver hur bred bilden kommer att visas
Webbläsaren väljer den bästa matchningen: värdet för sizes × enhetens DPR
Breddbeskrivningar (w) för flytande bilder; x för element med fast storlek
Ange alltid src som reserv

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Responsiva bilder med srcset och sizes” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Responsiva bilder med srcset och sizes”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Responsiva bilder med srcset och sizes”?

Visa bilder i lämplig storlek för olika skärmtätheter. Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Responsiva bilder med srcset och sizes”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här HTML Academy-lektionen?

Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Elementet img: src, alt, width och height
Responsiva bilder med srcset och sizes
Elementet picture för art direction
figure och figcaption

← Tillbaka till HTML Academy