Responsive billeder og lazy loading

Forestil dig, at du besøger et websted på en lille telefonskærm, men at webstedet indlæser et billede, der er beregnet til en stor computerskærm. Det spilder data og gør siden langsom!

Responsive billeder sikrer, at brugerne får billeder, der er optimeret til deres specifikke enhed og skærmstørrelse, hvilket forbedrer ydeevnen og brugeroplevelsen.

Attributten srcset giver dig mulighed for at angive en liste over forskellige billedfiler, som browseren kan vælge imellem. En måde at bruge den på er til skift af opløsning.

Det betyder, at du leverer billeder med højere opløsning til enheder med skærme med høj DPI (Retina) og billeder med standardopløsning til andre enheder.

• 1x: Standardopløsning
• 2x, 3x: Højere opløsninger

Ud over opløsning kan srcset også hjælpe med skift baseret på visningsområdet. Det giver dig mulighed for at tilbyde forskellige billedfiler baseret på browserens visningsområdes bredde.

Deskriptoren w angiver billedfilens naturlige bredde. Browseren vælger derefter den mest passende kilde.

Når du bruger srcset med w-deskriptorer, skal browseren vide, hvor bredt billedet faktisk bliver gengivet på siden ved forskellige visningsområdestørrelser. Det er her, attributten sizes kommer ind i billedet.

sizes tager en liste over mediebetingelser og bredder på billedpladser. Den fortæller browseren: "Ved denne skærmstørrelse optager billedet X % af visningsområdet."

Browseren bruger sizes til at vælge det bedste billede fra srcset. Den ændrer ikke billedets størrelse, men hjælper med at vælge den rigtige kildefil.

• (max-width: 600px) 100vw: Hvis visningsområdet er 600px eller mindre, fylder billedet 100 % af visningsområdets bredde.
• (max-width: 1200px) 50vw: Hvis visningsområdet er 1200px eller mindre, fylder billedet 50 % af visningsområdets bredde.
• 800px: Ellers er billedet 800px bredt.

Sådan fungerer srcset og sizes sammen. Prøv at ændre størrelsen på dit browservindue for at se, hvordan den kan vælge forskellige billeder.

Browseren bruger sizes til at beregne den ideelle billedbredde og finder derefter det nærmeste match blandt de bredder, der er angivet i srcset.

Nogle gange er det ikke nok blot at skalere et billede. Du vil måske vise et helt andet billede eller en anden beskæring baseret på skærmstørrelsen eller enhedstypen. Det kaldes art direction.

Elementet <picture> giver dig mulighed for at angive flere <source>-elementer med forskellige medieforespørgsler og billedkilder samt et fallback-element <img>.

Selv med responsive billeder kan en side stadig være langsom, hvis den indeholder mange billeder. Lazy loading hjælper ved at udskyde indlæsningen af ikke-kritiske ressourcer (f.eks. billeder eller iframes), indtil der er brug for dem.

Det betyder typisk, at de kun indlæses, når de er ved at komme ind i brugerens visningsområde.

• Reducerer sidens indledende indlæsningstid.
• Sparer båndbredde for brugerne.
• Forbedrer Core Web Vitals som LCP.

Moderne browsere tilbyder indbygget lazy loading, så du ikke behøver JavaScript-biblioteker til grundlæggende lazy loading. Du skal blot tilføje attributten loading="lazy" til dine <img>- eller <iframe>-tags.

• eager: Indlæses med det samme.
• lazy: Indlæsningen udskydes, indtil elementet er tæt på visningsområdet.
• auto: Browseren bestemmer.

Vi har gennemgået effektive teknikker til at optimere billeder og medier med henblik på webydeevne:

• Responsive billeder: Brug srcset (med x til opløsning og w til visningsområdets bredde) samt sizes for at levere billeder i passende størrelser.
• Art direction: Brug elementet <picture> for at få mere kontrol over billedvisningen baseret på mediebetingelser.
• Lazy loading: Brug loading="lazy" på <img> og <iframe> for at udskyde indlæsningen af indhold uden for skærmen og dermed øge sidens indledende indlæsningshastighed.

Ved at bruge disse metoder kan du forbedre dit websteds ydeevne og brugeroplevelse betydeligt!