Retina afbeeldingen op WordPress-websites

Wanneer je een iPhone, iPad of ander Apple-apparaat met retina-scherm hebt zul je vaak onscherpe afbeeldingen tegenkomen op websites. Dit is niet heel storend bij foto’s, maar een onscherp logo ziet er vaak amateuristisch uit en een onscherpe “call to action” leidt tot minder kliks.

Wat is retina?

Retina is een merknaam die Apple gebruikt voor schermen met een hogere pixel density (pixel-dichtheid) dan de voorgangers. Doordat er twee keer zoveel (of meer) pixels op hetzelfde oppervlak zitten, zijn tekst en andere symbolen scherper. Afbeeldingen lijken hierdoor echter minder scherp. Een goed voorbeeld:

Retina logo vergelijking
Het logo van WordPress.com (boven: retina, onder: niet retina) – afbeelding via WPMU

Je kunt dit ‘probleem’ verhelpen door speciale retina-versies van afbeeldingen naar je website te uploaden. Dit hoef je voor foto’s niet te doen, maar voor logo’s (in PNG of GIF-formaat) is het zeker aan te raden. Het is eigenlijk heel simpel: je uploadt een afbeelding die precies twee keer zo groot is dan het origineel. Als je logo.png dus 200×100 pixels is, upload je er nog één van 400×200 pixels. Meestal wordt deze speciale retina-versie van een afbeelding dan logo@2x.png genoemd. Wellicht ten overvloede: “2x” staat voor twee keer zo groot.

Een andere optie om je logo scherp te laten zien is door deze standaard op een dubbel formaat te uploaden en vervolgens op je website te tonen op de helft van dat formaat. Als je een logo van 400×200 pixels uploadt zou je deze op je website tonen op 200×100 pixels. Op apparaten met retina-scherm zal dit logo er scherp uit zien.

Toch geef ik zelf de voorkeur aan de @2x-variant, omdat het grotere bestand alleen geladen hoeft te worden op apparaten waarbij dit ook daadwerkelijk nodig is. Je kunt er gelukkig met een heel simpel Javascript-bestandje (retina.js) voor zorgen dat je website de @2x-afbeeldingen laat zien op de apparaten met een hogere pixel-dichtheid.

WordPress plugin

Ik heb dit Javascript-bestand in een WordPress-plugin verpakt die gratis te downloaden is via WordPress.org of direct vanuit je WordPress-admin: Retina @2x. Het enige dat deze plugin doet is het retina.js-script toevoegen aan je WordPress-website.

Retina @2x

Wanneer deze plugin geactiveerd is op je WordPress-website, zal deze automatisch controleren of er @2x-afbeeldingen beschikbaar zijn voor bepaalde bestanden. Als je dus een logo.png hebt geüpload, zorg er dan voor dat in exact dezelfde map ook een logo@2x.png bestand staat. Gebruikers met een retina-scherm krijgen nu automatisch de grotere afbeelding te zien.

Let op: Sommige (premium) WordPress themes hebben standaard al een optie om een retina-versie van je logo te uploaden via het Theme Options-paneel.

Hogere conversie met retina-buttons

Als je een call to action-knop op je website hebt, kan het ook verstandig zijn om hier een retina-afbeelding van te maken. Zo heb ik een affiliate-website over de iPhone SE waarbij we een “Bekijk op Bol.com”-knop laten zien. De afbeelding hierbeneden laat (iPhone 7-)screenshots zien van de knop zonder retina-versie (links) en mét retina-versie (rechts). je kunt op de onderstaande afbeelding klikken voor een grotere (100%) weergave.

Retina knop voorbeeld

Zoals je kunt zien is de retina-versie (rechts) stukken scherper op mijn iPhone 7. Je zou denken dat dit niet zo veel uitmaakt, maar de conversie van deze knop op iOS-apparaten steeg met meer dan 15 procent! Het is de (kleine) moeite dus meer dan waard.

Gepubliceerd door

Wouter Postma

Ik ben WordPress- en SEO-specialist. Hierover blog ik op deze website, maar ook op WordPress Lounge. Meer over mij lees je op de pagina "Over". Bekijk ook wat ik al gemaakt heb, of neem contact met me op!