Picture Element

Het picture element is een HTML5-tag waarmee je meerdere versies van dezelfde afbeelding kunt aanbieden aan verschillende apparaten en schermformaten. De browser kiest automatisch de meest geschikte variant op basis van schermgrootte, pixeldichtheid en beschikbare bandbreedte. Dit zorgt ervoor dat mobiele bezoekers een geoptimaliseerde, lichte afbeelding zien terwijl desktopgebruikers een grotere, scherpere versie krijgen.

Hoe het picture element werkt in de praktijk

Het picture element bevat meerdere source-elementen met verschillende afbeeldingsvarianten en een fallback img-tag. Elk source-element krijgt een media-attribuut mee waarin je een breakpoint definieert, bijvoorbeeld een minimale of maximale schermgrootte. De browser evalueert deze voorwaarden van boven naar beneden en laadt de eerste afbeelding die aan de criteria voldoet. Als geen enkele source-tag matcht, of als de browser het picture element niet ondersteunt, valt de code terug op de img-tag. Zo blijft de afbeelding altijd zichtbaar, ook in oudere browsers. Deze techniek is onderdeel van de W3C-standaard voor responsive images en wordt door alle moderne browsers ondersteund.

Waarom het picture element ontstond en waarom het nu telt

Voor 2014 was er geen native HTML-manier om verschillende afbeeldingen aan te bieden op basis van viewport. Ontwikkelaars moesten met JavaScript-trucs werken of één grote afbeelding serveren die op mobiel onnodig veel data verbruikte. Het picture element lost dit op door de keuze bij de browser te leggen, die exact weet welk scherm en welke netwerksnelheid de gebruiker heeft. In de praktijk zien we bij MKB-webshops dat productfoto's op mobiel 60 tot 70% kleiner kunnen zijn dan de desktopversie, zonder kwaliteitsverlies. Dat scheelt laadtijd, databundel en conversie. Sinds Core Web Vitals een officiële rankingfactor is, wordt het picture element steeds relevanter voor technische SEO.

Wat het picture element oplevert voor MKB-bedrijven

Voor een webshop met veel productfoto's of een dienstverlener met een portfolio-pagina is het picture element een directe winst. Mobiele bezoekers krijgen snellere laadtijden, wat afbreuk tijdens het browsen vermindert. Desktopbezoekers zien scherpe, hoogwaardige afbeeldingen die de kwaliteit van je product of dienst beter tonen. Bij een recent traject voor een B2B-groothandel zagen we de Largest Contentful Paint op mobiel dalen van 3,8 naar 1,9 seconden door het inzetten van het picture element voor hero-afbeeldingen en productgrid. Dat soort verbetering heeft directe impact op conversie en gebruikerstevredenheid. Als je een responsive design hebt maar nog geen gedifferentieerde afbeeldingen serveert, laat je snelheidswinst liggen. Een professioneel webdesign integreert het picture element standaard in templates en componenten.

Het picture element is niet voor elke afbeelding nodig, maar in specifieke situaties levert het meetbare voordelen op. Hieronder beschrijven we vier situaties waarin je het picture element inzet, plus wanneer je het beter kunt overslaan.

Hero-afbeeldingen en banners boven de vouw

De grootste afbeelding boven de vouw bepaalt vaak de Largest Contentful Paint, een van de drie Core Web Vitals. Voor een desktopscherm van 1920 pixels breed heb je een afbeelding van 2000 tot 2400 pixels nodig voor scherpe weergave op Retina-schermen. Diezelfde afbeelding op een mobiel scherm van 375 pixels is pure verspilling. Met het picture element serveer je een mobiele variant van 750 pixels breed en een desktopvariant van 2400 pixels. De browser kiest automatisch. In de praktijk scheelt dit 200 tot 400 kB per hero-afbeelding. Voor een landingspagina met één grote hero is dat het verschil tussen een LCP van 2,5 seconden en 4,2 seconden op een middelmatige mobiele verbinding. Dat heeft directe invloed op bouncepercentage en SEO-ranking.

Productfoto's in webshops met veel SKU's

Een webshop met 500 producten toont gemiddeld 12 tot 24 productafbeeldingen per categoriepagina. Als elke afbeelding 150 kB weegt op mobiel, laadt de pagina 1,8 tot 3,6 MB aan afbeeldingen. Met het picture element kun je een mobiele grid-variant van 400 pixels breed serveren in plaats van de 1200-pixels desktopvariant. Dat halveert de bestandsgrootte per afbeelding. Voor een professionele webshop betekent dit dat categoriepagina's op mobiel in 2 tot 3 seconden volledig laden in plaats van 5 tot 7 seconden. Dat verhoogt de kans dat een bezoeker doorklikt naar een productpagina. Bij een webshop met gemiddeld 8000 sessies per maand en een conversieratio van 2,1% kan een halve seconde sneller laden 15 tot 25 extra conversies per maand opleveren.

Art direction voor verschillende schermverhoudingen

Soms wil je op mobiel een andere crop of een ander deel van de afbeelding tonen dan op desktop. Denk aan een portretfoto die op desktop horizontaal staat maar op mobiel verticaal moet worden weergegeven, of een productfoto waar de focus op mobiel meer op het product ligt en minder op de achtergrond. Het picture element ondersteunt dit via verschillende source-elementen met elk een eigen afbeelding. Dit heet art direction. Een voorbeeld: een dienstverlener met een teamfoto van 6 personen op een rij. Op desktop zie je alle gezichten scherp. Op mobiel zou diezelfde afbeelding te klein worden, waardoor gezichten onherkenbaar zijn. Met art direction serveer je op mobiel een close-up van 2 tot 3 teamleden. Technisch complexer dan alleen resolutie aanpassen, maar voor visueel ontwerp met sterke storytelling de moeite waard.

Wanneer het picture element de juiste keuze is en wanneer niet

Gebruik het picture element als de afbeelding groter is dan 100 kB, boven de vouw staat of een groot deel van de pagina inneemt. Voor kleine iconen, logo's of decoratieve afbeeldingen onder de 30 kB is het overhead. Ook als je al lazy loading en moderne formaten zoals WebP of AVIF inzet via een CDN met automatische transformatie, levert het picture element minder extra winst op. Sommige CDN's zoals Cloudflare of Imgix detecteren apparaattype en resolutie server-side en serveren automatisch de juiste variant. In dat geval is het picture element redundant. Maar als je een standaard WordPress-site hebt zonder CDN of beeldoptimalisatie-plugin, is het picture element een van de krachtigste tools om Core Web Vitals te verbeteren zonder externe afhankelijkheden.