De meeste iPhones, iPads of ander Apple-apparaten hebben tegenwoordig een zogenaamd retina scherm. Retina schermen kunnen websites extra scherp tonen. Echter veel afbeeldingen en logo’s zien er op een retina scherm onscherp uit terwijl op een normaal scherm dit niet het geval is. Lees hier waardoor dit komt en hoe je dit op jouw website kunt oplossen.

Hoe werkt een Retina scherm?

Elk scherm maakt gebruik van pixels om de afmeting te bepalen. Het aantal pixels dat wordt weergeven op een bepaald oppervlakte heet de pixeldichtheid.  Hoe hoger de pixeldichtheid des te scherper het beeld kan worden. Een retina scherm heeft zo’n hoge pixeldichtheid dat een persoon de pixels niet meer kan onderscheiden, zodat er een scherper en beter leesbaar beeld wordt getoond.

Om je een beter voorbeeld te geven zie je hieronder twee device pixels, een normale scherm van een laptop en een retina scherm. Zoals je kunt zien heeft de gewone display veel minder DPI dan de retina display.

Op het internet is de standaard om afbeeldingen te tonen op 72 DPI (dots per inch). Dit omdat de meeste mensen gebruik maken van een gewone display. Voordeel van deze afbeeldingen is dat ze minder groot zijn in opslag waardoor een gebruiker jouw website sneller ziet. High DPI (Retina) is een scherm met een pixeldichtheid van 200 dpi of groter. Zodra je op een retina scherm deze 72dpi afbeeldingen bekijkt krijg je echter alleen wazige afbeeldingen te zien. Dit omdat het aantal pixels lager is dan het aantal pixels op het scherm.

Oplossing 1: Gebruik van SVG afbeeldingen

Nu zou je elke afbeelding op jouw website kunnen laten tonen in een hoge pixeldichtheid. Nadeel is echter dat veel afbeeldingsformaten zoals  jpg en png met een hogere DPI groter worden waardoor een webpagina trager inlaadt. Bovendien merken bezoekers met een gewoon scherm dan wel dat de website langzaam inlaadt terwijl ze geen verschil zien in weergave.

Dit is echter niet het geval bij afbeeldingen in het SVG formaat. SVG is een zogenaamde vectorafbeelding en wordt beschreven door de formules van objecten zoals punten, lijnen en krommingen. SVG afbeeldingen kunnen daardoor zich tot elk gewenst formaat vergroten zonder dat er kwaliteitsverlies optreedt.

Het SVG formaat is zeer geschikt voor logo’s en iconen omdat deze afbeeldingen vaak makkelijk in vectoren kunnen worden beschreven. Voor foto’s en infographics zijn echter te complex om in SVG formaat te beschrijven waardoor de afbeeldingen te groot worden. Voor dit soort afbeeldingen moet een andere oplossing worden bedacht.

Oplossing 2: Gebruik 2 formaten voor elke afbeelding

De standaard voor afbeeldingen is vooralsnog 72DPI omdat de meeste mensen gebruik maken van een gewone display. Zodra je deze afbeeldingen bekijkt op een retina display, krijg je alleen wazige afbeeldingen indien je ze niet een hogere resolutie geeft. Beter zou zijn om alleen aan bezoekers met een retina scherm deze hoge DPI afbeeldingen te laten zien terwijl je aan bezoekers met de normale scherm de standaard afbeeldingen toont. Er zijn verschillende mogelijkheden om dit voor elkaar te krijgen.

Het script retina.js

Dit javascript zorgt ervoor dat iedere afbeelding op je website wordt gecheckt of er nog een retina versie bestaat van deze afbeelding. Zo ja, dan wordt de normale afbeelding vervangen door de retina versie die te herkennen is doordat deze afbeelding @2x voor het bestandsformaat heeft staan. Het script retina.js is te downloaden via http://imulus.github.io/retinajs/

De plugin WP Retina 2x

Ben je zelf niet technisch, zijn er altijd plugins die dit voor jouw kunnen oplossen. De plugin WP Retina 2x bijvoorbeeld. Deze plugin zorgt ervoor dat op basis van de opgegeven media sizes binnen WordPress elke afbeelding een retina variant krijgt indien je daarvoor kiest en het voldoet aan de normen. Dit doet de plugin door een dubbele resolutie toe te passen op basis van de media sizes van wordpress. Het beste is dan ook om afbeeldingen up te loaden met deze dubbele resolutie om zo aan de voorwaarden te voldoen.

Als voorbeeld, je wilt een afbeelding uploaden en gebruiken als een medium size. De medium size onder wordpress is 300×300. Om het retina geschikt te maken, zul je de afbeelding moeten uploaden met een formaat van 600×600. Elke andere formaat die kleiner is dan de medium size zal daarbij ook retina geschikt zijn zoals thumbnails, maar er kunnen geen retina varianten gemaakt worden van afbeeldingen die kleiner zijn dan de dubbele resolutie van media sizes.

Indien je best veel afbeeldingen al hebt geupload kun je alsnog retina varianten van maken indien ze aan de voorwaarde voldoen.
Om bestaande afbeeldingen retina klaar te maken ga je onder media naar retina. Je kunt vervolgens kiezen om een bulk generate te doen (dit zou best lang gaan duren indien je gebruik maakt van vele afbeeldingen) of individueel te generaten. Verder zie je ook kleuren naast elke afbeelding. De kleuren betekenen als volgt:

• Blauw – Het retina bestand bestaat voor de specifieke resolutie
• Geel – Je voldoet aan de voorwaarde, maar je hebt nog geen retina varianten. Klik op generate om zo retina varianten te krijgen
• Rood – Er is geen retina variant, en je voldoet niet aan de voorwaarden. Indien de resolutie aan de linkerkant ook in het rood is, dat betekent dat de volledige grote van de afbeelding te klein is.

Boven de afbeelding overzicht zie je een stuk tekst en daar is gelijk te zien welke resolutie je afbeeldingen moet uploaden indien je ze voor de hoogste toegestane wordpress resolutie wilt gebruiken.

Je kunt ook instellen dat nieuwe geuploade media bestanden gelijk een retina variant krijgen.

Conclusie

Het doel van een website blijft om zo veel mogelijk bezoekers te trekken en daarbij hoort naast goede functionaliteiten ook een goede vormgeving bij. Heb je veel bezoekers met een retina scherm dan is de stap om jouw website retina vriendelijk te maken geen overbodige stap.