Kort fortalt: <picture> er et kontainer-element med ét eller flere <source> og præcis ét afsluttende <img>. Browseren vælger første matchende source baseret på type, media og srcset; ellers falder den tilbage til img, som også bærer alt og dimensionsattributter.
Format-cascade (moderne billeder)
<picture>
<source type="image/avif" srcset="hero.avif" />
<source type="image/webp" srcset="hero.webp" />
<img src="hero.jpg" alt="..." width="1200" height="630" />
</picture>Med flere opløsninger flytter I srcset ind på hver source - samme princip som srcset og sizes.
Art direction (forskelligt crop)
Når mobil og desktop ikke bare er skalering, men forskellig beskæring:
<picture>
<source media="(max-width: 600px)" srcset="hero-krop-mobil.jpg" />
<img src="hero-banner-desktop.jpg" alt="..." width="1200" height="630" />
</picture>Her styrer I hvilket billede der vises i hvilket layout - ikke kun hvilken filstørrelse af samme motiv.
Kontra “bare” img
img+srcseter nok hvis I kun har ét bitmap-format og responsive størrelser.pictureer når I har flere typer (AVIF/WebP/JPEG) eller media-betingede kilder med forskellig komposition.
Prioritet og LCP
Det indre img er det element I typisk sætter fetchpriority og loading på. Søgemaskiner bruger img’s alt - skriv meningsfuldt alt og behold width/height for at undgå CLS.
Relaterede begreber
FAQ
Er CSS background-image erstattet af picture?
Ikke automatisk. Mange LCP-problemer kommer af hero som CSS-baggrund - overvej semantisk img eller picture i HTML for bedre discovery, prioritering med fetchpriority og klarere SEO.
Koster picture ekstra HTML-vægt?
Lidt flere bytes end ét img - gevinsten ved mindre billedfiler via moderne formater opvejer næsten altid markup’en.
Hvordan vælger browseren source?
Den tager første matchende source efter type/media-regler og falder tilbage til img. Rækkefølge og type="image/avif" m.m. betyder noget - test med DevTools Network.
Skal jeg altid bruge picture til WebP?
Ikke nødvendigvis. Hvis I kun har én raster-type og responsive størrelser, kan img med srcset være nok. picture er når I har flere formater eller forskelligt crop pr. breakpoint.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Sådan fejlsøger du LCP fra start til slut
Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.
Brug fetchpriority og preload rigtigt på de vigtigste ressourcer
Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.
Forbedr LCP med billeder: hero, formater, preload og responsive størrelser
Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.
Fetchpriority, preload og preconnect: hvornår de hjælper og hvornår de gør skade
Lær hvornår fetchpriority, preload og preconnect faktisk forbedrer load, og hvornår de bare skaber mere støj og dårlig prioritering i browseren.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
