Je kunt responsieve afbeeldingen toevoegen door meerdere formaten van een afbeelding te uploaden. Wanneer een gebruiker jouw website bezoekt, kun je een combinatie van HTML, CSS en JavaScript gebruiken om de afbeelding weer te geven die past bij de schermgrootte en apparaat specificaties van de gebruiker.

Vaak vereist het maken van de verschillende formaten wat handmatig werk. Dit is met name het geval als je het formaat van de afbeeldingen wilt wijzigen om beter te laten passen bij specifieke schermformaten. Zodra de verschillende formaten zijn opgeslagen, moet je al de afbeeldingen naar de hosting uploaden om naar de behoefte van de gebruikers te kunnen worden weergegeven.

Je kunt ook tools gebruiken, zoals Content Delivery Networks (CDN’s), om het formaat van afbeeldingen dynamisch aan te passen en weer te geven. Dit is een eenvoudigere opties als je veel afbeelding of meerdere websites hebt.

Waarom je responsieve afbeeldingen zou moeten gebruiken

Er zijn veel redenen waarom je responsieve afbeeldingen op jouw websites zou moeten gebruiken. Houd er naast de onderstaande redenen rekening mee dat Google zoekvoorkeuren geeft aan websites met responsieve afbeeldingen.

• Efficiënt bandbreedtegebruik: responsieve afbeeldingen zorgen ervoor dat alleen de afbeelding wordt weergegeven en gedownload die het nuttigst is voor een gebruiker. Dit elimineert verspilling van bandbreedte, omdat je geen bestanden verzendt die groter zijn dan wat een gebruiker daadwerkelijk kan gebruiken. Het maakt jouw website ook gebruiksvriendelijker, vooral voor mobiele gebruikers die soms over beperkte gegevens beschikken.
• Snellere laadtijd: hoe minder gegevens een gebruikers hoeft te downloaden, hoe sneller de laadtijd van de pagina is. Dit is van vitaal belang omdat veel gebruikers niet bereid zijn langer dan een paar seconden te wachten voordat een pagina is geladen en een website zullen verlaten als het laden te lang duurt.
• Verbeterde gebruikerservaring: wanneer je afbeeldingen aan jouw website toevoegt, doe je dit om de gebruiker een specifieke ervaring te bieden. Responsieve afbeeldingen zorgen ervoor dat gebruikers afbeeldingen kunnen bekijken zoals je dat wilt, zonder vervorming of verkeerde plaatsing. Dit geeft de gebruiker een aangenamere gebruikerservaring en maakt het waarschijnlijker dat ze op jouw website blijven.

Hoe werken responsieve afbeeldingen in WordPress?

Vanaf WordPress 4.4 zorgt het toevoegen van afbeeldingen aan jouw mediabibliotheek automatisch voor responsieve afbeeldingen. Wanneer je een afbeelding uploadt, maakt WP automatisch vijf kopieën van de afbeelding in verschillende formaten. Deze maten zijn:

• Volledig: de oorspronkelijke uploadgrootte
• Groot: maximale breedte of hoogte van 1024px
• Middelgroot: maximale breedte of hoogte van 768px
• Medium: maximale breedte of hoogte van 300px
• Miniatuur: maximale breedte of hoogte van 150px

Dit zijn de meest gebruikte formaten. Je kunt deze maten ook wijzigen of handmatig extra maten toevoegen.

Om te bepalen hoe deze maten worden gebruikt, bevat WordPress de img-tag-attributen srcset en sizes. Deze kenmerken geven de browser informatie over welke maten beschikbaar zijn en wanneer die maten moeten worden geselecteerd.

In het srcset-attribuut wijs je een afbeeldingsbreedte toe. De browser controleert vervolgens de breedte en selecteert de grootste afbeelding die overeenkomt met de browserbreedte of lager. In het size-attribuut specificeer je de grootte waarnaar de afbeelding moet worden geschaald. Hierdoor kun je de meest efficiënte afbeelding selecteren en ervoor zorgen dat deze in verhouding tot het scherm wordt weergegeven.

Hieronder ziet je een voorbeeld van hoe dit eruitziet in een afbeeldingstag:

Dingen die je moet weten over responsieve afbeeldingen

Wanneer je met responsieve afbeeldingen werkt, zijn er een paar aspecten waarmee je rekening moet houden. Deze overwegingen kunnen je helpen ervoor te zorgen dat jouw afbeeldingen worden weergegeven zoals je verwacht en dat jouw gebruikers de best mogelijke ervaring krijgen.

“maten” is optioneel met een vangst

Wanneer je jouw size-attribuut definieert, moet je begrijpen dat het de vereiste afbeelding specificeert, evenals de weergegeven breedte van de afbeeldingen. Dit betekent dat je ervoor moet zorgen dat de breedtes tussen afbeeldingen overeenkomen. Als afbeeldingsbreedtes verschillen tussen bij het srcs-attribuut, dan kan het zijn dat je een afbeelding krijgt die vervormd is wanneer de wordt weergegeven.

Afbeeldingsweergave verschilt per browser

Meestal geven browsers de afbeeldingsgrootte weer die het beste overeenkomt met de grootte van de viewport. De viewport is het gedeelte van de interface van een browser waarbinnen de inhoud van een website wordt weergegeven. Verschillende browsers gebruiken echter verschillende methoden voor het selecteren van een afbeelding, dus jouw gebruikerservaring kan daardoor inconsistent zijn.

Deze variabiliteit en het gebrek aan controle betekenen dat je niet op het scset-attribuut moet vertrouwen voor ontwerpbeslissingen. Overweeg in plaats daarvan bijvoorbeeld om verschillende afbeeldingen of afbeeldingen met verschillende verhoudingen weer te geven om beter bij specifieke apparaten te passen.

“srcset” is geen standaard

Als je een thema gebruikt dat door iemand anders is ontwikkeld, houd er dan rekening mee dat srcset-attribuut niet standaard is geïmplementeerd. Veel thema’s, vooral oudere, bevatten deze of de attributen niet. Als je deze kenmerken wilt gebruiken, moet je het thema dat je gebruikt aanpassen of een ander thema zoeken dat de kenmerken wel implementeert.

Als je niet zeker weet of jouw thema het srcset-attribuut gebruikt en het staat niet in de omschrijving, dan kun je dit handmatig controleren. De eenvoudigste manier om dit te doen is door een van jouw pagina’s met een afbeelding op een desktop of laptop te openen. Afhankelijk van de browser en het besturingssysteem zou je met de rechtermuisknop op de afbeelding moeten kunnen klikken en inspecteren moeten kunnen kiezen. Dit stelt je in staat om naar het element te kijken en te zien of het srcset-attribuut is geïmplementeerd.

Retina-afbeeldingen

Bij het nadenken over responsive design is het ook belangrijk om retina-afbeeldingen in overweging te nemen. De meeste schermen vereisen tegenwoordig retina-ready afbeeldingen, dus als je dit probleem aanpakt, zorg je ervoor dat jouw afbeeldingen er op ieder apparaat mooi en scherp uitzien. Je kunt dit instellen met behulp van de WordPress-plugin Perfect Images (WP Retina 2x).

Deze plugin maakt de afbeeldingsbestanden die nodig zijn voor Retina-apparaten (of apparaten met een hoge DPI) en geeft ze dienovereenkomstig weer op die schermen. Retina-afbeeldingen worden automatisch voor je gegenereerd zodra je een nieuwe afbeelding uploadt naar de mediabibliotheek.

De plugin Perfect Images (WP Retina 2x) werkt perfect met de nieuwe ondersteuning voor responsieve afbeeldingen van WordPress die hierboven is beschreven en voegt de retina-afbeeldingen toe aan het srcset-attribuut. Het geeft je ook controle over wat WordPress doet, want het geeft je bijvoorbeeld de mogelijkheid om afbeeldingsformaten te verwijderen die niet langer nodig zijn.

Conclusie

Responsieve afbeeldingen zijn cruciaal voor het creëren van een positieve gebruikerservaring. Wanneer afbeeldingen responsive zijn, kunnen gebruikers bestanden op elk type apparaat bekijken zonder problemen te ondervinden, bijvoorbeeld van vervormde afbeeldingen. Je kunt ook responsieve afbeeldingen gebruiken om de laadtijden te verlagen en bandbreedte efficiënt te gebruiken.

De meeste WordPress-thema’s worden geleverd met een reeks responsieve afbeeldingsconfiguraties, maar je kunt vaak wijzigingen aanbrengen. Voordat je wijzigingen aanbrengt in de standaardinstellingen, moet je ervoor zorgen dat je de gevolgen goed begrijpt. Om gegevensverlies te voorkomen, moet je van te voren een back-up van je jouw website maken en het child-thema aanpassen in plaats van het originele bestand.

Deze blog is mogelijk gemaakt door Jeroen van JM Promotions