Responsive design is een belangrijk onderdeel in het ontwikkelproces van een website geworden. In de basis is dit principe vrij eenvoudig, de website schaalt automatisch mee naar de grootte van de viewport. Bij responsive design zijn er echter veel zaken waar je rekening mee moet houden.
Eén daarvan is de laadtijd van de website. Een mobiel apparaat kan vaak immers minder MB’s verwerken dan een desktop apparaat. De WordPress community weet dit ook. Onlangs is er een voorstel gedaan om responsive afbeeldingen in WordPress core te ondersteunen.
Een gemiddelde webpagina is tegenwoordig zo’n 2MB groot, waarbij de meeste bytes door afbeeldingen worden gebruikt. Doordat schermen steeds groter worden, betekent het ook dat er steeds grotere afbeeldingen worden gebruikt. Voor veel schermen is het echter niet nodig om zo’n grote afbeelding in te laden. Door responsive afbeeldingen te ondersteunen is het mogelijk om verschillende afbeeldingsformaten in te laden.
Er zijn al een aantal WordPress plugins waarmee responsive afbeeldingen binnen WordPress mogelijk zijn. De meeste populaire is de RICG Responsive Images plugin. Deze plugin draait op inmiddels meer dan 10.000 WordPress installaties. Er is een voorstel gedaan om deze plugin aan WordPress Core in versie 4.4 toe te voegen. En dat is goed nieuws, we hebben daardoor geen extra plugins meer nodig om responsive afbeeldingen te ondersteunen.
De werking van deze functionaliteit is vrij eenvoudig. Er kunnen verschillende formaten van een afbeelding worden gegenereerd en die formaten zullen automatisch met de attribuut srcset aan de afbeelding tag worden toegevoegd. Deze functionaliteit werkt direct out-of-the-box en vergt geen configuratie instellingen.
Het responsive afbeelding onderdeel werkt als volgt:
<img srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 640px) 640px, 100vw" alt="Some image" />
De srcset attribuut bestaat uit een komma gescheiden lijst met de verschillende afbeeldingsformaten. Elk afbeeldingsformaat heeft een extra device-pixel-ratio beschrijving om te bepalen voor welke resolutie de afbeelding bedoeld is. De w staat voor de breedte (in pixels) van deze afbeelding. De sizes attribuut verteld de browser vervolgens hoe een afbeelding getoond moet worden.
Hierbij wordt alleen de afbeelding ingeladen die binnen een bepaalde resolutie valt. Dit bespaart veel dataverkeer en zorgt voor een snellere website.