Responsive images: afbeeldingen voor alle schermformaten

Implementeer srcset en sizes voor betere laadtijden op mobiele apparaten en desktops

10 min lezen Intermediate Februari 2026

Mobiele telefoon en tablet naast elkaar tonen dezelfde website met responsieve afbeeldingen op verschillende schermgroottes

Waarom responsieve afbeeldingen essentieel zijn

Een bezoeker op je website kan van alles gebruiken â€” een iPhone van 2019, een nieuwe Android-tablet, of een 4K-monitor. Allemaal moeten ze dezelfde website zien, maar niet allemaal dezelfde afbeelding downloaden. Dat’s precies waar responsive images om gaat.

Met srcset en sizes kun je verschillende versies van dezelfde afbeelding serveren. Een telefoon krijgt een kleine versie, een desktop een grote. Iedereen wint: snellere laadtijden, minder dataverbruik, en beter beeld op elk apparaat. We gaan je stap voor stap leren hoe je dit implementeert.

Het verschil is groot

Een afbeelding van 2400×1600 pixels is 850KB groot. Op een telefoon kun je dezelfde foto op 600×400 pixels weergeven, maar dan slechts 85KB. Dat’s tien keer kleiner. Veel sneller laden.

Srcset: meerdere versies aanbieden

Srcset is het HTML-attribuut waarmee je zegt: “Hier zijn verschillende versies van deze afbeelding, kies maar wat je nodig hebt.” De browser beslist automatisch welke versie het beste past.

Je schrijft het zo:

<img src="small.jpg" 
          srcset="small.jpg 600w, 
                          medium.jpg 1200w, 
                          large.jpg 2400w"
          alt="Product afbeelding">

Die getallen (600w, 1200w, 2400w) zijn pixel-breedtes. Je zegt tegen de browser: “Hier is een versie van 600 pixels breed, hier een van 1200, hier een van 2400.” De browser kiest de meest geschikte op basis van het apparaat en de beschikbare schermruimte.

Voorbeeld van drie afbeeldingversies naast elkaar, van klein naar groot, met verschillende resoluties gelabeld

Website layout tonen hoe afbeeldingen zich aanpassen aan verschillende schermbreedtes en container-grootte

Sizes: hoe breed is de afbeelding echt?

Srcset zegt welke versies beschikbaar zijn. Maar sizes zegt hoe breed de afbeelding werkelijk weergegeven wordt op het scherm. Dat’s belangrijk, want de browser moet weten hoeveel pixels het nodig heeft.

Stel je website heeft op mobiel een afbeelding van 100% breedte, op tablet 75%, en op desktop 50% van de viewport. Dan schrijf je:

<img src="small.jpg"
          srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2400w"
          sizes="(max-width: 768px) 100vw,
                        (max-width: 1024px) 75vw,
                        50vw"
          alt="Artikel afbeelding">

Nu weet de browser: op kleine schermen is de afbeelding volledige breedte, dus download ik de 600w-versie. Op grote schermen slechts 50%, dus volstaat 1200w prima.

Praktisch voorbeeld: stap voor stap

Maak verschillende grootte-versies

Je originele foto is 3000×2000 pixels. Je maakt drie versies: 800×533 (kleine), 1600×1067 (medium), en 3000×2000 (groot). Namen: product-s.jpg, product-m.jpg, product-l.jpg.

Schrijf je HTML

Gebruik srcset en sizes. Zorg dat je fallback src (eerste attribuut) altijd klein en snel laadt. Die wordt gebruikt door oude browsers en als eerste geladen.

Test op verschillende apparaten

Open je site op een telefoon, tablet, en desktop. Controleer in de developer tools welke afbeelding gedownload wordt. Chrome: DevTools Network filter op Images.

Controleer de performance

Gebruik Google Lighthouse of WebPageTest. Controleer of de pagina sneller laadt op mobiel dan voorheen. De Core Web Vitals zullen verbeteren.

Tips voor beter resultaat

Responsive images zijn niet moeilijk, maar je moet een paar dingen goed doen:

Comprimeer je afbeeldingen. Laat srcset niet al het werk doen. Zorg dat zelfs je grote versies niet meer dan 500KB zijn.
Denk aan de layout. Als een afbeelding op mobiel 100% breedte is en op desktop 50%, moet sizes dat weergeven.
Gebruik WebP. Nog beter dan JPG. Combineer WebP met JPEG fallbacks via <picture>-element.
Wees voorzichtig met pixel density. 2x schermen (Retina) hebben hogere DPI. Zorg dat je daar ook versies voor hebt als je gebruikers ervoor hebt.
Test echt op slow 3G. Je thuis 5G-verbinding is niet representatief. Chrome DevTools stelt slow 3G in.

Vergelijking van bestandsgroottes tussen JPEG, PNG, en WebP formaten voor dezelfde afbeelding

WebP: nog beter dan JPEG

Responsive images en srcset zijn geweldig. Maar je kunt nog verder gaan met WebP-formaat. Het’s kleiner dan JPEG (vaak 25-30% minder) en heeft betere kwaliteit.

Niet alle browsers ondersteunen WebP (oude IE, Android Browser). Daarom gebruik je het <picture>-element met fallbacks:

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="Fallback">
</picture>

Dit geeft moderne browsers WebP, oudere browsers krijgen JPEG. Het beste van beide werelden. Met responsive images erbij krijgt elke browser exact wat-ie nodig heeft.

Samenvatting

Responsive images zijn een eenvoudige manier om je website sneller te maken op mobiele apparaten zonder iets aan het design te veranderen. Met srcset zeg je welke versies je hebt. Met sizes zeg je hoe breed ze werkelijk zijn. De browser doet de rest.

Maak 2-3 versies van elke afbeelding (klein, medium, groot)

Gebruik srcset om die versies aan te bieden

Gebruik sizes om je layout op te beschrijven

Test op echte apparaten en in DevTools

Combineer met WebP voor nog beter resultaat

Het kost wat voorbereiding, maar de performance-winst is aanzienlijk. Gebruikers op 3G-netwerken voelen echt het verschil. En Google waardeert het in je zoekrankingen. Win-win.

Over deze gids

Deze gids is informatief en bedoeld om je inzicht te geven in responsive images. TechnologieÃ«n en best practices kunnen veranderen. Test altijd je implementatie op je eigen website met real-world traffic en apparaten. Resultaten kunnen variÃ«ren op basis van je specifieke setup, hosting, en publiek.