Hoe om te gaan met Retina en HiDPI schermen

Met de introductie van de iPhone 4 van Apple kwam ook de introductie van schermen met een hogere PPI (pixel per inch). De Retina schermen (zoals Apple het noemt) en HiDPI schermen (zoals de rest het noemt) zorgen ervoor dat op hetzelfde oppervlak meerdere pixels getoond kunnen worden. Waar de meeste schermen 72 PPI tonen, kunnen de Retina Displays en HiDPI schermen gemiddeld meer dan 200 PPI tonen. Dit houdt in dat alles gedetailleerder en scherper wordt. Prachtig toch?

Wazige websites

Alleen is er een probleem. We hebben onze websites decennia lang geoptimaliseerd voor schermen die slechts 72 PPI aan kunnen. Op de Retina en HiDPI schermen worden afbeeldingen met maar 72 PPI 'uitgesmeerd' over meer dan 200 PPI wat betekent dat de afbeeldingen er wazig uitzien op deze schermen. Vaak worden afbeeldingen ook gebruikt voor bijvoorbeeld icoontjes of om bepaalde elementen afgeronde hoeken of een schaduwtje te geven. Uiteindelijk zit je met een wazige website waarbij alleen de tekst scherp is.

Wil je weten hoe dit eruit ziet maar heb je geen Retina of HiDPI scherm? Geen probleem, je kan het namelijk ook gemakkelijk simuleren in een browser door in te zoomen. Door een paar keer op 'CTRL' en '+' te drukken vergroot je de website en zie je dat de plaatjes wazig worden. Wil je weer terug naar de normale stand, druk dan op 'CTRL' en '0'.

Grotere plaatjes, CSS3 en Icon Fonts

Gelukkig zijn er oplossingen om ervoor te zorgen dat jouw website er haarscherp uitziet op deze schermen. Om te beginnen kijken we naar de afbeeldingen die je bijvoorbeeld bij een artikel plaatst.

Een simpele truc is om de afbeeldingen groter te uploaden maar kleiner dan het oorspronkelijke formaat te tonen op de website. Stel je voor je wil een afbeelding tonen op een vlak van 200 x 150 pixel. Upload de afbeelding in een formaat groter dan 200 x 150 pixels. Een goede maat staaf is om de afbeelding 1.5 keer zo groot te uploaden. In het geval van 200 x 150 pixels is dat 300 x 225 pixels (Let wel op dat de originele afbeelding minstens 300 x 225 pixels moet zijn). Binnen je website kun je dan (met bijvoorbeeld een WYSIWYG editor) de afbeelding plaatsen en een breedte geven van 200 pixels en een hoogte van 150 pixels. Nu ziet het er zowel op een scherm van 72 PPI als op een scherm van 200+ PPI goed uit.

Grotere plaatjes betekent wel dat de bezoeker meer KB's (Kilobytes) moet downloaden. Dit maakt voor iemand op een breedband connectie niet veel uit maar als je op je mobiele telefoon zit met een 3G connectie dan is elke extra gedownloade KB er één teveel. Volgens Dan Sheerman is dit echter geen probleem omdat onze mobiele providers de afbeeldingen al dusdanig comprimeren waardoor mobiele bezoekers minder hoeven te downloaden.

Zoals ik al aangaf worden afbeeldingen ook vaak gebruikt om bepaalde stijl elementen zoals afgeronde hoeken of schaduwtjes te simuleren. Met de komst van CSS3 is het niet meer nodig om hiervoor afbeeldingen te gebruiken maar kun je het de browser direct laten genereren. Omdat de browser nu het vuile werk opknapt is een afgeronde hoek of schaduw PPI onafhankelijk. Je kan ze zo groot opblazen als je zelf wil zonder dat het wazig wordt.

Als laatste is er ook nog een mooie oplossing om icoontjes goed weer te geven op hoge PPI schermen. Door gebruik te maken van zogenaamde 'Icon Fonts' zijn de icoontjes die je gebruikt geen afbeeldingen meer, maar is het een lettertype (of font). Daardoor zullen de icoontjes, net zoals de tekst, op je website even scherp blijven op alle schermen. Een lettertype maakt namelijk geen gebruik van pixels en zal zich daarom ook niks aantrekken van welke PPI een scherm heeft. Dit is goed te zien in het voorbeeld van CSS Tricks.

Laat ze maar komen

Je kan jezelf afvragen of het echt nodig is dat we schermen hebben met een dergelijke hoge PPI, maar dat ze binnenkort mainstream gaan worden is onvermijdelijk. Met de bovenstaande technieken is jouw website er in ieder geval helemaal klaar voor!

Heb je zelf nog tips of vragen. Laat het mij dan weten in het commentaar!