Webdesign en retina beelschermen

Apple is met de lancering van de Iphone 4 in 2010 begonnen met het gebruik van Retina beeldschermen. De resolutie van deze retina schermen is zo hoog dat de afzonderlijke pixels niet meer met het blote oog te onderscheiden zijn. Hierdoor worden de elementen op het scherm veel scherper én rustiger om naar te kijken.

Ook de nieuwste versie van MacBook Pro kan gekocht worden met een retina scherm. Deze heeft een resolutie van 2880×1800 pixels. Ik denk dan ook dat andere merken niet lang achter zullen blijven en de retina schermen over een aantal jaren gemeengoed is. Een “nadeel” is dat websites moeten worden geoptimaliseerd voor Retina schermen…

“Normaal” scherm vs Retina scherm

Beide afbeeldingen hierboven zijn 450×539 pixels. Het enige verschil is dat de afbeelding aan de rechterkant eigenlijk 900×1078 pixels is (2x zo groot). Normaal gesproken zou je nooit een afbeelding laden die 2x zo groot is dan dat deze op het beeldscherm getoond wordt. Dat is echter precies wat je moet doen wanneer je je website wilt optimaliseren voor een retina beeldscherm! Doe je dit niet dan zullen je afbeeldingen ‘blurry’ (zie foto links) op de iphone/ipad/macbook pro met Retina scherm getoond worden. Het retina beeldscherm zal alle afbeeldingen namelijk 2x zo groot maken. 

Handige artikelen voor je Retina website en webdesign

  1. Het gebruik van grotere afbeeldingen met meer compressie (netvlies.nl)
  2. Maak gebruik van media queries in je css bestanden (iwalt.com)
  3. Hoe Apple haar website optimaliseert voor Retina beelschermen (cloudfour.com)