We houden enorm van de Retina schermen, op de Multi-touch toestellen zijn ze echt super. Het Retina scherm op de iPhone laat de gebruiker toe om op een klein scherm, kleine items te lezen. Op de iPad benadert het Retina scherm bijna print met een scherpte waar je je aan kan snijden.

iPad Retina

Typografie en vector afbeeldingen zien er prachtig uit op het iPad Retina scherm maar het nadeel is dat afbeeldingen er wat blurry of gepixeld uit zien. Zeker in vergelijking met de scherpte die je teksten erop hebben valt het enorm op. De reden hiervoor is dat afbeeldingen geoptimaliseerd zijn voor het web namelijk 1 op 1 (1 pixel = 1 pixel). Een Retina scherm gebruikt 4 pixels daar waar gewone schermen er maar 1 voor gebruiken. Afbeeldingen worden dus 4 x opgeblazen op een Retina scherm.

Op een iPad kan je zoomen en tokkelen en daardoor is 1-op-1 pixel media leefbaar, maar de nieuwe Macbook Pro die nu ook uitgerust is met een Retina scherm kan dit niet. En daar wordt het opblazen van afbeeldingen wel een issue. Zelfs het Google logo ziet er gepixeld uit op een Macbook Pro met Retina scherm.

De fix voor gepixelde afbeeldingen is relatief eenvoudig: de webdesigner moet alle afbeeldingen 2x groter schalen maar weergeven in de originele 1-op-1 pixelgrootte. Een voorbeeld is dus dat je een 200?200 px afbeelding gebruikt maar op 100 x 100px weergeeft. Op deze manier zien gebruikers met een gewoon scherm het normale logo en de gebruikers van een Retina display (Macs, iPads, iPhones) zien een enorme verbetering in kwaliteit dankzij de hogere resolutie.

Apps updaten voor voordelen Retina scherm

Toen Phil Schiller op de presentatie van de MacBook vertelde dat de apps een update nodig hebben om de voordelen van een Retina scherm te kunnen benutten vergat hij erbij te vertellen dat ook alle websites moeten worden upgedate… Zelfs de website van Apple heeft nog niet alle afbeeldingen aangepast voor de Retina display: enkel een aantal afbeeldingen op de homepagina zijn nu al in orde. Een ook onze eigen website houdt hier nog geen rekening mee.

Ons advies

De impact op het bandbreedte verbruik is navenant. Afbeeldingen 2x groter in resolutie betekenen ook een verdubbeling in bandbreedte verbruik. Sinds kort is er een doorbraak op het gebied van de jpg compressie: jpg mini. We raden aan om de afbeeldingen 2x groter op te slaan onder het jpg mini formaat. Zo blijft het bandbreedte verbruik onder controle en kunnen levensgenieters met een Retina scherm optimaal genieten van hun webervaring. Een andere optie is om alle afbeeldingen 2x op te slaan: 1 x zoals je al altijd deed, en 1x met dubbele resolutie. Via css kan je detecteren welke display er wordt gebruikt en op basis daarvan de juiste afbeeldingen weergeven.

Het is maar een kwestie van tijd voor we ook op de met Windows uitgeruste toestellen zullen kunnen kiezen voor een Retina scherm. De Retina schermen zetten dus een nieuwe standaard voor webdesign.

Vond je dit artikel waardevol? Deel het dan hieronder via Twitter, Facebook of Linkedin.

Volg je @bloovi al op Twitter? #bloovi