Kort fortalt: Uden srcset sender mange sites ét stort billede til alle enheder. Med srcset (kandidater) og sizes (layout-estimat) kan browseren vælge den mindste fil der stadig ser skarp ud i den aktuelle kontekst.
Minimal idé
<img
src="/hero-800.jpg"
srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1200.jpg 1200w"
sizes="(max-width: 640px) 100vw, 800px"
alt="..."
width="1200"
height="630"
/>w-deskriptorer angiver filens reelle pixelbredde.sizesfortæller hvor mange CSS-pixels billedet fylder ved forskellige breakpoints - et layout-estimat browseren bruger til at vælge fil.
Hvorfor det betyder noget for LCP
Mobil-LCP bliver ofte dårlig fordi et meget bredt JPEG sendes til en smal skærm. Korrekt srcset + komprimerede varianter kan flytte LCP-sekunder - især på 3G/4G og ældre telefoner.
sizes skal matche virkeligheden
Hvis sizes er for optimistisk (“altid 100vw” når billedet kun er halv bredde), vælger browseren for store filer. Mål layout i DevTools eller brug faktiske sizes-udtryk der afspejler grid og max-width.
AVIF/WebP i praksis
Brug <picture> når I vil tilbyde AVIF med WebP-fallback og JPEG til sidst - srcset lever på <source>-elementerne med matchende sizes.
Typiske fejl
- Kun
srcsetudensizes(browseren antager 100vw - undertiden OK, ofte ikke). - Copy-paste fra andet tema uden at rette
sizestil jeres grid. - Manglende
width/height→ CLS selv når filstørrelsen er fin. - Samme enorme masterfil i CMS uden genererede varianter -
srcsetkræver faktisk flere filer eller en billed-CDN der laver dem on-the-fly.
Kobling til fetchpriority og lazy
- Sæt fetchpriority på det faktiske LCP-billede.
- Brug ikke
loading="lazy"på LCP-billedet - se lazy loading.
Relaterede begreber
FAQ
Er det nok med srcset fra et CMS-plugin?
Ofte kun delvist. Tjek at sizes matcher jeres rigtige layout - ellers vælger browseren for store filer selv med gode kildebilleder.
Hvad hvis jeg udelader sizes?
Browseren antager typisk 100vw - det kan være forkert hvis billedet kun fylder en kolonne eller en brøkdel af viewport. Forkert sizes → for store downloads.
Hvordan relaterer srcset til CSS image-set()?
Samme idé for CSS-baggrunde. For semantiske img og LCP er det srcset/sizes og picture der typisk giver målbare gevinster i performance-værktøjer.
Skal jeg bruge x eller w deskriptorer?
w (reelle filbredder) + sizes er standard til responsive layout. x (device-pixel-ratio) bruges mere til faste bredde-ikoner og enkle cases.
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.
