Responsieve afbeeldingen en lazy loading

Stel je voor dat je een website bekijkt op een klein telefoonscherm, maar dat de site een afbeelding laadt die bedoeld is voor een grote desktopmonitor. Dat verspilt gegevens en maakt de pagina traag!

Responsieve afbeeldingen zorgen ervoor dat gebruikers afbeeldingen krijgen die zijn geoptimaliseerd voor hun specifieke apparaat en schermgrootte. Dat verbetert de prestaties en gebruikerservaring.

Met het attribuut srcset kun je een lijst met verschillende afbeeldingsbestanden aanbieden waaruit de browser kan kiezen. Een manier om dit te gebruiken is voor resolutiewisseling.

Dit betekent dat je afbeeldingen met een hogere resolutie aanbiedt aan apparaten met schermen met een hoge pixeldichtheid (Retina) en afbeeldingen met een standaardresolutie aan andere apparaten.

• 1x: standaardresolutie
• 2x, 3x: hogere resoluties

Naast resolutie kan srcset ook helpen bij viewportwisseling. Hiermee kun je verschillende afbeeldingsbestanden aanbieden op basis van de viewportbreedte van de browser.

De descriptor w geeft de intrinsieke breedte van het afbeeldingsbestand aan. De browser kiest vervolgens de meest geschikte bron.

Bij het gebruik van srcset met w-descriptors moet de browser weten hoe breed de afbeelding op de pagina daadwerkelijk wordt weergegeven bij verschillende viewportgroottes. Daarvoor dient het attribuut sizes.

sizes bevat een lijst met mediaomstandigheden en breedten van afbeeldingsruimten. Het vertelt de browser: "Bij deze schermgrootte neemt de afbeelding X% van de viewport in."

De browser gebruikt sizes om de beste afbeelding uit srcset te kiezen. De afbeelding wordt niet verkleind; het attribuut helpt alleen om het juiste bronbestand te selecteren.

• (max-width: 600px) 100vw: als de viewport 600px of minder is, is de afbeelding 100% van de viewportbreedte.
• (max-width: 1200px) 50vw: als de viewport 1200px of minder is, is de afbeelding 50% van de viewportbreedte.
• 800px: anders is de afbeelding 800px breed.

Zo werken srcset en sizes samen. Wijzig de grootte van je browservenster om te zien hoe de browser verschillende afbeeldingen kan kiezen.

De browser gebruikt sizes om de ideale afbeeldingsbreedte te berekenen en zoekt vervolgens de dichtstbijzijnde overeenkomst tussen de door srcset opgegeven breedten.

Soms is alleen het schalen van een afbeelding niet voldoende. Je wilt misschien een volledig andere afbeelding of een andere uitsnede weergeven, afhankelijk van de schermgrootte of het apparaattype. Dit heet art direction.

Met het element <picture> kun je meerdere elementen <source> met verschillende mediaquery's en afbeeldingsbronnen aanbieden, plus een terugvaloptie met <img>.

Zelfs met responsieve afbeeldingen kan een pagina traag blijven als deze veel afbeeldingen bevat. Lazy loading helpt door het laden van niet-kritieke bronnen, zoals afbeeldingen of iframes, uit te stellen totdat ze nodig zijn.

Meestal betekent dit dat ze pas worden geladen wanneer ze bijna in de viewport van de gebruiker komen.

• Verkort de aanvankelijke laadtijd van de pagina.
• Bespaart bandbreedte voor gebruikers.
• Verbetert Core Web Vitals zoals LCP.

Moderne browsers bieden native lazy loading. Je hebt dus geen JavaScript-bibliotheken nodig voor basisfunctionaliteit. Voeg gewoon het attribuut loading="lazy" toe aan je tags <img> of <iframe>.

• eager: wordt onmiddellijk geladen.
• lazy: het laden wordt uitgesteld totdat het element de viewport bijna bereikt.
• auto: de browser beslist.

We hebben krachtige technieken bekeken om afbeeldingen en media te optimaliseren voor webprestaties:

• Responsieve afbeeldingen: gebruik srcset (met x voor resolutie en w voor viewportbreedte) en sizes om geschikte afbeeldingsformaten te leveren.
• Art direction: gebruik het element <picture> voor meer controle over de weergave van afbeeldingen op basis van mediaomstandigheden.
• Lazy loading: gebruik loading="lazy" op <img> en <iframe> om inhoud buiten beeld uit te stellen, zodat de aanvankelijke laadtijd van de pagina korter wordt.

Met deze methoden kun je de prestaties en gebruikerservaring van je website aanzienlijk verbeteren!