Overslaan en naar de inhoud gaan

Hoe om te gaan met Retina en HiDPI schermen

Steeds meer apparaten krijgen schermen die meer pixels per inch kunnen laten zien. Deze ontwikkeling heeft echter wat haken en ogen voor website bouwers en beheerders. In dit artikel leg ik uit wat het probleem is en hoe je dit het beste kunt tackelen.

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!

Heb je iets aan deze content gehad? Laat weten hoe je ons waardeert.

Meld je aan voor onze nieuwsbrief

En je ontvangt net als 2321 andere leden een overzicht van onze nieuwste artikelen. Met onderwerpen als; de laatste webdesign trends, SEO tips, conversie optimalisatie, Joomla, Drupal en Wordpress ontwikkelingen.

Reacties

Hallo,
Ik zelf heb ook een retina macbook pro 15''.
Met het maken van mijn eigen website zag ik dit probleem ook al aankomen.
Ik vroeg me af waarom plaatjes nu inderdaad 'waziger' worden op het retina scherm.
De website's die nu inderdaad ook gebaseerd zijn op retina displays zien er geweldig uit.
Na mijn eigen ervaring lijkt het zelfs dat een simpele website wel gebaseerd op retina er beter uit ziet dan een ingewikkelde mooie website die niet gebaseerd is op retina.

Verder een super artikel, bedankt!

Met vriendelijke groet,
Glenn

Standaard avatar Glenn 20.11.2012 - 10:54

Natuurlijk is het fijn als images altijd scherp zijn en getoond worden zoals de website ze bedoelt heeft. Dit zal als bijzonder prettig worden ervaren door de bezoeker. Met komst van 3G (straks 4G) en voor thuis de glaskabel, krijg je steeds sneller toegang tot het internet. Hierdoor zul je het verschil in download tijd - zoals jij ook al aangeeft - nauwelijks merken.

Echter kleeft er wel een gevaar aan het zomaar plaatsen van grotere images dan nodig is. Omdat tegenwoordig zo goed als iedereen Google gebruikt, dienen we ook rekening te houden met de richtlijnen die Google hanteert voor jouw website.

In het kort komt het er op neer dat een bezoeker niet meer moet downloaden dan nodig is. Hierbij hanteert Google - ik denk even los gezien van het feit dat providers de images ook voor je comprimeren - vrij strak de regel dat je "strafpunten" kunt krijgen wanneer het merendeel van je images een veel groter formaat heeft dan nodig is.. Ook al pas je zelf een zeer goede compressie toe.

Een andere vervelende bijkomstigheid kan zijn dat de algemene laadtijd van je website hoger wordt. Met andere woorden: je website wordt trager. Trage(re) websites kunnen een lagere ranking binnen het Google netwerk krijgen dan snel en goed geoptimaliseerde websites. Hiermee stuit ik voor mijzelf op 2 belangrijke punten. Zeker wanneer het voor jou belangrijk is om goed (hoog) te scoren op het Google netwerk.

Mijn vraag aan Robert: Kan deze “vervelende” bijkomstigheid opgelost worden met CSS(3)? Met andere woorden: kun je voor een bepaalde range van schermresoluties - voor elk geval - de beste images laden?

Standaard avatar Remco Toele 26.11.2012 - 14:36

"Google straft tragere websites", dat is een goed punt! Ik denk daarom ook dat je heel goed moet nadenken over wat je belangrijk vind voor jouw website. Moet deze er op de nieuwe mobieltjes en tablets perfect uitzien of heb je liever geen strafpunten van Google.

Het is natuurlijk ook lastig om te zeggen in hoeverre je gestraft wordt door Google en hoeveel effect dat heeft op je positie in de zoekresultaten. Dat maakt het moeilijker om de voor en nadelen tegen elkaar op te wegen. Je kan ook je statistieken nemen als leidraad. Als je bijvoorbeeld ziet dat er per maand maar twee mensen met een HiDPI of Retina scherm je website bezoekt dan is het de moeite niet waard. Maar hou deze statistieken goed in de gaten want het kan de komende jaren explosief stijgen.

Achter de schermen wordt er druk gewerkt aan een andere oplossing die wat vriendelijker is voor Google. De zogenaamde 'Picture' tag. Met deze Picture tag kun je op basis van de DPI resolutie van het beeldscherm verschillende formaten van plaatjes aanbieden. Apparaten met lagere resoluties downloaden dan het formaat van het plaatje wat correspondeert met de DPI van het beeldscherm en hoeven dus niet (zoals hierboven beschreven) een groter plaatje te downloaden. Echter zoals dat gaat met elk nieuw HTML/CSS element kan het nog wel eens jaren duren voordat dit algemeen geaccepteerd wordt.

Voorlopig is de door mij beschreven methode in het artikel de beste manier om afbeeldingen op een goede manier te tonen op een HiDPI en Retina scherm. Je zal echter zelf de afweging moeten maken hoe zwaar de straf van Google zal zijn voor het tonen van 'te grote' afbeeldingen.

Standaard avatar rroose 30.11.2012 - 10:38

Ik heb gehoord dat PNG afbeeldingen wel met goede kwaliteit kunnen worden vergroot. Is het vervangen van alle afbeeldingen in de website naar het PNG formaat dan ook een mogelijke oplossing?

Standaard avatar Rene 12.12.2012 - 11:13

Volgens mij maakt dat niet zo heel veel uit. Een PNG is over het algemeen wel scherper maar wordt ook wazig als je deze bekijkt op een HiDPI of Retina scherm bekijkt. Het is wachten op een oplossing zoals Chris Coyer beschrijft in zijn artikel 'On Responsive Images' waarbij hij een nieuw type bestand voorstelt namelijk de 'Responsive PNG' (http://css-tricks.com/on-responsive-images/).

Standaard avatar rroose 29.01.2013 - 10:38
De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Beperkte HTML

  • Regels en alinea's worden automatisch gesplitst.