Blog

Wat moet je weten over responsieve afbeeldingen in WordPress?

Wat moet je weten over responsieve afbeeldingen in WordPress?

WordPress is een populair content managementsysteem waarmee je websites kunt ontwerpen zonder code of met minimaal gebruik van de code. Je kunt dat doen door thema’s te installeren die worden geleverd met kant-en-klare ontwerpen en plug-ins te downloaden die functies aan je website toevoegen.

Vrijwel alle WordPress-thema’s hebben tegenwoordig een ingebouwd responsief ontwerp, dat je website aanpast aan de schermgrootte en apparaten van je gebruikers, bijvoorbeeld tablet of mobiel. Hoe dan ook, het kan gebeuren dat sommige thema’s niet goed werken, bijvoorbeeld dat afbeeldingen niet correct worden weergegeven, waardoor je dit moet oplossen door te rommelen in de responsieve standaardinstellingen.

Als je het standaardthema wijzigt, kun je bovendien problemen ondervinden met responsieve afbeeldingen. Als je begrijpt hoe responsieve afbeeldingen in WordPress werken, dan ben je ook in staat om de oorzaak te vinden en het probleem op te lossen.

In dit artikel vertellen we alles wat je moet weten over responsieve afbeeldingen in WordPress.

Wat zijn responsieve afbeeldingen?

Responsieve afbeeldingen worden aan een gebruiker weergegeven op basis van de schermgrootte en apparaat specificaties, bijvoorbeeld een afbeelding in hoge resolutie die naar een grote HD-monitor wordt gestuurd of een afbeelding in lage resolutie die naar een kleine, oudere mobiele telefoon wordt gestuurd. Het doel van responsieve afbeeldingen is om de efficiëntie van de bandbreedte maximaliseren zonder de gebruikerservaring in gevaar te brengen.

Je kunt responsieve afbeeldingen toevoegen door meerdere formaten of formaten van een afbeelding te uploaden. Wanneer een gebruiker je website bezoekt, kun je een combinatie van HTML, CSS en Javascript gebruiken om de afbeelding weer te geven die past bij het scherm van de gebruiker.

Vaak vereist het maken van de verschillende formaten en formaten wat handmatig werk. Dit is voornamelijk het geval als je het bijsnijden van afbeeldingen wilt wijzigen om beter te passen bij specifieke schermformaten. Zodra je verschillende formaten zijn opgeslagen, moet je al deze afbeeldingen op je server hosten om naar behoefte te kunnen worden weergegeven. Kortom, veel en foutgevoelig werk.

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

Waarom zou je responsieve afbeeldingen gebruiken?

Er zijn genoeg redenen waarom je responsieve afbeeldingen zou moeten gebruiken, die zowel in je eigen voordeel werken als in die voor de gebruiker. We bespreken er een aantal.

  • Efficiënt gebruik van de bandbreedte: responsieve afbeeldingen zorgen ervoor dat alleen de afbeelding wordt weergegeven en gedownload die het nuttigst is voor een gebruiker. Dit elimineert verspilling van bandbreedte, aangezien je geen bestanden verzendt die groter zijn dan wat een gebruiker kan gebruiken. Het maakt je website ook gebruiksvriendelijker, vooral voor mobiele gebruikers die vaak over beperkte data beschikken.

  • Snellere laadtijd: hoe minder data een gebruiker hoeft te downloaden, hoe sneller de laadtijd van je website. Dit is van vitaal belang, omdat veel gebruikers niet bereid zijn langer dan een paar seconden te wachten en een website zullen verlaten als het laden te lang duurt.

  • Verbeterde gebruikerservaring: wanneer je afbeeldingen toevoegt, doet 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 aangename ervaring en zorgt ervoor dat ze op je website blijven.

Houd er naast de bovenstaande redenen rekening mee dat Google zoekvoorkeuren geeft aan websites met responsieve afbeeldingen.

Hoe werken responsieve afbeeldingen in WordPress?

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

  • Volledig: de oorspronkelijke uploadgrootte

  • Groot – maximale breedte of hoogte van 1024px

  • Middelgroot – maximale breedte of hoogte van 768px

  • Gemiddeld – maximale breedte of hoogte van 300 px

  • Miniatuur: maximale breedte of hoogte van 150px

Je kunt deze formaten ook wijzigen en/of handmatig extra formaten toevoegen.

Om te bepalen hoe deze maten worden gebruikt, bevat WP de img-tag attributen srcset en maten. Deze attributen geven informatie over de beschikbare formaten en wanneer die gebruikt moeten worden.

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. In het size attribuut geef je de grootte op 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.

Een voorbeeld van hoe dit eruitziet:

Wat moet je 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 de afbeeldingen worden weergegeven zoals je verwacht en dat je gebruikers de best mogelijke ervaring krijgen.

Formaat is optioneel

Wanneer je het formaat van de afbeelding definieert, moet je begrijpen dat het zowel de vereiste afbeelding specificeert als de breedte van de afbeeldingen. Dit betekent dat je ervoor moet zorgen dat de breedtes tussen afbeeldingen overeenkomen. Als de breedtes verschillen tussen srcs, dan kan het zijn dat je een afbeelding krijgt die vervormd wordt weergegeven. Bovendien, als je srcset gebruikt zonder formaten op te nemen, moet je je ervan bewust zijn dat de gebruikte browser een standaardbreedte van 100vw gebruikt.

Afbeeldingsweergave verschilt per browser

Meestal geven browsers de afbeeldingsgrootte weer die het beste overeenkomt met de viewport-grootte. Verschillende browsers gebruiken echter verschillende methoden voor het selecteren van een afbeelding, dus je gebruikerservaring kan inconsistent zijn. Sommige browsers geven bijvoorbeeld prioriteit aan gecachte versies van afbeeldingen, ongeacht of de grootte overeenkomt.

Deze variabiliteit en het gebrek aan gedetailleerde controle betekenen dat je niet op srcset moet vertrouwen voor ontwerpbeslissingen. Overweeg om verschillende afbeeldingen of afbeeldingen met verschillende verhoudingen weer te geven om beter bij specifieke apparaten te passen. Om dit te bereiken, kun je het element <picture> gebruiken.

Het attribuut “srcset” is geen standaard

Als je een thema gebruikt dat door iemand anders is ontwikkeld, houd er dan rekening mee dat srcset niet standaard is geïmplementeerd. Veel thema’s, vooral oudere, bevatten deze of de maten-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 je thema srcset gebruikt en het staat niet in de beschrijving, kun je dit handmatig controleren. De eenvoudigste manier om dit te doen, is door een van je pagina’s met een afbeelding op je desktop of laptop te openen. Afhankelijk van e browser en besturingssysteem moet je met de rechtermuisknop op de afbeelding klikken en vervolgens voor inspecteren kiezen. Dit stelt je in staat om naar het <img> element te kijken en om te zien of srcset is geïmplementeerd.

Retina afbeeldingen

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

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

De plug-in Perfect Images (WP Retina 2x) werkt perfect met de hierboven besproken ondersteuning voor responsieve afbeeldingen van WordPress en voegt de retina-afbeeldingen toe aan de src-set. Het geeft je ook controle over wat WordPress doet, bijvoorbeeld de mogelijkheid om afbeeldingsformaten te verwijderen die niet langer nodig zijn.

De plug-in is beschikbaar in zowel een gratis als een premium-versie.

Conclusie

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

De meeste WordPress-thema’s worden geleverd met een reeks responsieve afbeeldingsconfiguraties, maar je kunt hierin 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 tevoren een back-up van je website maken en een child-thema aanpassen in plaats van het originele bestand.

Heb je hulp nodig bij WordPress?

Heb je hulp nodig bij WordPress gerelateerde zaken, zoals het optimaliseren van afbeelding in WordPress? Of wil je een WordPress website laten maken? Wij hebben jarenlange ervaring bij het maken, onderhouden, updaten, aanpassen en monitoren van WordPress websites. Neem dan contact met ons op voor meer informatie!

Deze blog is mede mogelijk gemaakt door Jeroen van JM Promotions

 

    Dienst:

    error: Niet toegestaan