Twitter Contact Blog

Nick de Kruijk

Fotografie »

Hoge resolutie schermen, hoe ga ik daarmee om?

vrijdag 22 augustus 2014 11:53

Mooi hoor, al die smartphones, tablets en laptops tegenwoordig met hoge resolutie schermen, door Apple ook wel Retina-schermen genoemd, maar wat is het nou eigenlijk en waarom is het belangrijk?
Retina schermenMooi hoor, al die smartphones, tablets en laptops tegenwoordig met hoge resolutie schermen, door Apple ook wel Retina-schermen genoemd, maar wat is het nou eigenlijk en waarom is het belangrijk?

Het gaat allemaal om de 'pixeldichtheid' van een scherm. Ofwel: hoeveel pixels hebben ze samengepropt in een klein gebied. De meeste hogeresolutie- of retina schermen hebben minstens 300 pixels per inch (2,54 cm). Door pixels zo klein te maken, zijn ze met het blote oog op normale gebruiksafstand niet meer te onderscheiden. Afbeeldingen en teksten zijn zo dus superscherp.

Aangezien retina schermen tegenwoordig volop gebruikt worden, moet bij het maken van een website daar dan ook rekening mee gehouden worden. Retina scherm varianten hebben meestal een dubbele resolutie vergeleken met hun normale broertje. Heeft een logo op een normaal scherm bijvoorbeeld een afmeting van 300 bij 200 pixels, dan moet de retina variant 600 bij 400 zijn. Een verviervoudiging dus van het totale aantal pixels en, bij vergelijkbare compressie of kwaliteit, ook een verviervoudiging van bestandsformaat. Daarbij bestaat echter het nadeel dat een site met veel afbeeldingen langer moet laden en dat is geen prettige ervaring voor de bezoeker.

Er zijn verschillende technieken om hiermee om te gaan. Een veelgebruikte techniek is om met een javascript plugin of css media queries (huh? ja, precies) op de achtergrond te checken of het gebruikte scherm retina is of niet. Op basis daarvan kun je de browser vertellen of het grotere, hoge resolutie plaatje moet worden geladen of het normale. Op deze manier merken bezoekers met een 'normaal' scherm geen verschil en krijgen schermen met hoge resolutie de optimale site te zien maar moet er iets meer gedownload worden. Het grootste nadeel van deze techniek is dat ieder plaatje dus twee keer moet worden opgemaakt, opgeslagen, geupload etc. 

Een andere techniek kwam ik twee jaar geleden tegen op een blog van Daan Jobsis/Netvlies (klik hier om deze te bekijken). Na wat testjes heb ik voor deze methode gekozen. Kort samengevat wordt daarbij voor ieder type scherm hetzelfde plaatje gebruikt. Dit betekent dat normale schermen een plaatje tonen dat een dubbele resolutie heeft die door de browser wordt vekleind tot een normaal formaat. Het plaatje met viervoudige resolutie dus, maar om te voorkomen dat dit plaatje ook een viervoudige bestandsgrootte (en dus downloadgrootte) heeft, wordt een veel hogere compressie toegepast. Daardoor heeft het hoge resolutie plaatje pakweg dezelfde bestandsgrootte als het normale plaatje. 

Maar hogere compressie betekent ook een lagere kwaliteit. Vooral bij JPEG foto's zie je in dat geval blokjesvorming of rare halo's om gezichten of objecten. Die 'artifacts' zie je goed als je het plaatje in formaat op een normaal scherm bekijkt. Maar omdat het plaatje wordt verkleind in de site op een normaal scherm, zijn die artifacts nauwelijks meer zichtbaar. En retina schermen zijn zo scherp dat de artifacts zo klein worden dat ze ook niet meer opvallen. Nog een bijkomend voordeel hierbij, is dat ieder plaatje slechts eenmaal geüpload of opgeslagen hoeft te worden. 

Al met al vind ik dit een veel efficiëntere methode en gebruik ik deze vrijwel dagelijks. Er is echter één nadeel aan deze techniek: browsers moeten de afbeelding verkleinen en dat gaat alleen goed als het hoge resolute plaatje exact de dubbele hoeveelheid pixels heeft van het plaatje op een normaal scherm. Van 600 x 400 naar 300 x 200 gaat dus perfect, maar een 489 x 120 plaatje gaat niet goed omdat een normaal scherm dan 489 / 2 = 244,5 pixels moet tonen. En schermen met halve pixels bestaan helaas niet waardoor het plaatje lichtelijk vervormd wordt en daardoor onscherp. Hier kan bij het ontwerp echter rekening mee gehouden worden en in de praktijk is dit nadeel eigenlijk nooit van toepassing.

Wil je meer weten? Bekijk dan de hier de originele blog met voorbeelden.
« Terug
panorama
Bezoek mij in een oude klompenfabriek
Gelegen op loopafstand van het Centraal Station (5min) zit ik met andere creatieve bedrijven in De Klompenfabriek.

Bezoekadres
Weerdsingel Westzijde 33A
3513 BC  Utrecht
Verlegen?
Laat je e-mailadres of telefoonnummer achter en ik neem zo snel mogelijk contact op.

Zakelijke gegevens
KvK: 30157344
BTW: NL170866270B.01