Daan Jobsis Retina revolutie

The devil is in the details
Details, daar gaat het vaak om in ons werk. Ik vind ze als rasechte pixel perfectionist in ieder geval erg belangrijk. Ik gruwel van Jaggies en lelijke compressie artifacten in iconen en afbeeldingen op een site. De hele Retina revolutie die Apple opgang aan het brengen is er daarom eentje om in de gaten te houden. Retina schermen zijn schermen die een grotere hoeveelheid pixels hebben waardoor je als gebruiker enkele pixels niet meer kunt waarnemen met het blote oog. Hierdoor worden de elementen op het scherm veel scherper en rustiger om naar te kijken. Apple gebruikt een verdubbeling in de hoogte en breedte en past dit nu toe in de iPhone, The New iPad en sinds kort voor het eerst in een laptop computer. Het is een ontwikkeling die niet meer om te keren is, andere fabrikanten gaan dit zeker ook toepassen, of doen dit al.

Met technieken als @font-face en CSS3 zijn fonts, kaders, schaduwen en kleurverlopen super strak te krijgen. Omdat deze elementen gebaseerd zijn op vectors en/of bestaan uit wiskundige formules die makkelijk geschaald kunnen worden naar een groter formaat en zo scherp blijven. Dit is niet aan de hand met raster afbeeldingen die opgebouwd zijn uit pixels. Een afbeelding die er prima uitziet op een normaal scherm ziet er wazig uit op een Retina scherm. Dit komt omdat de afbeelding als het ware opgeblazen wordt naar een formaat dat dubbel zo groot is. Er is gewoon niet genoeg beelddata beschikbaar om de afbeelding scherp te houden.

Om deze raster afbeeldingen wel scherp te krijgen is er eigenlijk één oplossing en dat is een dubbel formaat gebruiken. Meer pixels, meer scherpte! Vele vakgenoten hebben hierover al uitgebreide artikelen geschreven, zoals Connor Turnbull. Hij heeft een grondige analyse gemaakt van onder andere hoe Apple zijn eigen site geschikt aan het maken is voor Retina schermen. In het kort: eerst laadt de normale pagina, waarna ze detecteren of ze te maken hebben met een Retina scherm. Als dit zo is worden de dubbele resolutie afbeeldingen ingeladen en vervangen ze de normale afbeeldingen. Een gebruiker moet dus extra veel data downloaden, ruwweg 4 a 5x de hoeveelheid van de normale site. Belachelijk natuurlijk! Hebben we net een beetje snelheid op het internet, worden we weer teruggeworpen naar het digitale stenen tijdperk. Dat is dus een slecht idee om te doen met nieuwe sites die we maken. Einde van de Retina revolutie voor het internet.

Of niet…

Meer scherpte met minder kb’s
Eén ding staat vast als je dit probleem echt op wilt lossen: je hebt grotere afbeeldingen nodig. Afbeeldingen van dubbel formaat. Dat is ook mijn uitgangspunt geweest toen ik wat testjes ging doen.

Ik heb een afbeelding van 300 x 200 px genomen en daar een jpg van gemaakt met een compressie van 80, de bestandsgrootte kwam uit op 21 kb. Dat werd mijn basis bestand, met de resolutie van een normaal scherm. Daarna heb ik dezelfde afbeelding op een dubbel (Retina) formaat en met dus 4x zoveel pixels bewaard, met dezelfde compressie en deze werd 68 kb. De theorie klopt, want dit bestand is dik 3x zo groot. In een test HTML-pagina heb ik beide afbeeldingen naast elkaar gezet, waarbij ik de Retina afbeelding 50% geschaald heb zodat beide afbeeldingen even groot waren. Getest op The New iPad met Retina scherm, en ja hoor super scherp, maar helaas veel te zwaar om echt bruikbaar te zijn.

Ik ben daarna naar 1,5x het aantal kb’s gegaan van het basis bestand, dus nog steeds met een dubbele resolutie, maar met meer compressie. En nog steeds super scherp! Maar ook nog te zwaar. De volgende stap was gaan naar dezelfde bestandsgrootte als het basis bestand. Dus nog meer compressie gebruiken. En ook dat werkte, de afbeelding bleef nog steeds super scherp.

“Kleinere bestandsgrootte én betere kwaliteit op beide type schermen! Dat kan niet.”

En waarom niet nog verder comprimeren van de Retina afbeelding? Ik ben dus naar de 75% van de bestandsgrootte van het basis bestand gegaan. En warempel, ook deze afbeelding was nog veel scherper op een Retina scherm dan het basis bestand. En zelfs op een iPad 1, 2 en normale computerschermen kun je het verschil als je goed kijkt zien. Bizar, want het bestand is kleiner. Kleinere bestandsgrootte én betere kwaliteit op beide type schermen! Dat kan niet dacht ik. Het moet wel aan het type afbeelding liggen wat ik als test gebruikt hebt. Maar met alle daarna geteste afbeeldingen werkte het.

Het komt er op neer dat 4x meer beelddata meer toevoegt dan zware compressie afbreuk doet aan het eindbeeld. Uiteraard zijn er meerdere factoren van invloed of deze techniek ook echt ingezet kan gaan worden in toekomstige sites die we maken bij Netvlies. Want hoe zal het werken met responsive sites waarbij afbeeldingen meeschalen? En zullen onze klanten hier mee om kunnen gaan. Hoe moet de mate van compressie bepaald worden, en kunnen we dat automatisch in ons CMS oplossen?

Voorbeelden
In linker kolom staan telkens dezelfde basis afbeeldingen met normale resolutie, in de rechterkolom staan de Retina afbeeldingen met de verschillende compressie waarden. Natuurlijk wel bekijken op een Retina scherm!

Basis resolutie
(300 x 200 px)
Retina resolutie
(600 x 400 px)
300px / jpg quality 80 / 21kb
Jpg compressie 80 / 21 kb
300px / jpg quality 31 / 16kb
Jpg compressie 31 / 16 kb (75% van basis)
300px / jpg quality 80 / 21kb
Jpg compressie 80 / 21 kb
600px / jpg quality 42 / 21kb
Jpg compressie 42 / 21 kb (even groot als basis)
300px / jpg quality 80 / 21kb
Jpg compressie 80 / 21 kb
600px / jpg quality 53 / 32kb
Jpg compressie 53 / 32 kb (1,5x zo groot als basis)
300px / jpg quality 80 / 21kb
Jpg compressie 80 / 21 kb
600px / jpg quality 80 / 68kb
Jpg compressie 80 / 68 kb (volledig retina)

 

Basis resolutie
(300 x 200 px)
Retina resolutie
(600 x 400 px)
300px / jpg quality 80 / 17kb
Jpg compressie 80 / 17 kb
300px / jpg quality 35 / 13kb
Jpg compressie 35 / 13 kb (75% van basis)
300px / jpg quality 80 / 17kb
Jpg compressie 80 / 17 kb
600px / jpg quality 46 / 17kb
Jpg compressie 46 / 17 kb (even groot als basis)
300px / jpg quality 80 / 17kb
Jpg compressie 80 / 17 kb
600px / jpg quality 59 / 26kb
Jpg compressie 59 / 26 kb (1,5x zo groot als basis)
300px / jpg quality 80 / 17kb
Jpg compressie 80 / 17 kb
600px / jpg quality 80 / 47kb
Jpg compressie 80 / 47 kb (volledig retina)

 

Basis resolutie
(300 x 200 px)
Retina resolutie
(600 x 400 px)
300px / jpg quality 80 / 18kb
Jpg compressie 80 / 18 kb
600px / jpg quality 25 / 13kb
Jpg compressie 25 / 13 kb (75% van basis)
300px / jpg quality 80 / 18kb
Jpg compressie 80 / 18 kb
600px / jpg quality 41 / 18kb
Jpg compressie 41 / 18 kb (even groot als basis)
300px / jpg quality 80 / 18kb
Jpg compressie 80 / 18 kb
600px / jpg quality 52 / 27kb
Jpg compressie 52 / 27 kb (1,5x zo groot als basis)
300px / jpg quality 80 / 18kb
Jpg compressie 80 / 18 kb
600px / jpg quality 80 / 52kb
Jpg compressie 80 / 55 kb (volledig retina)

 

Basis resolutie
(300 x 200 px)
Retina resolutie
(600 x 400 px)
300px / jpg quality 80 / 13kb
Jpg compressie 80 / 13 kb
300px / jpg quality 25 / 10kb
Jpg compressie 25 / 10 kb (75% van basis)
300px / jpg quality 80 / 13kb
Jpg compressie 80 / 13 kb
600px / jpg quality 40 / 13kb
Jpg compressie 40 / 13 kb (even groot als basis)
300px / jpg quality 80 / 13kb
Jpg compressie 80 / 13 kb
600px / jpg quality 52 / 20kb
Jpg compressie 52 / 20 kb (1,5x zo groot als basis)
300px / jpg quality 80 / 13kb
Jpg compressie 80 / 13 kb
600px / jpg quality 80 / 39kb
Jpg compressie 80 / 39 kb (volledig retina)

 

Basis resolutie
(300 x 200 px)
Retina resolutie
(600 x 400 px)
300px / jpg quality 80 / 14kb
Jpg compressie 80 / 14 kb
300px / jpg quality 6 / 11kb
Jpg compressie 6 / 11 kb (75% van basis)
300px / jpg quality 80 / 14kb
Jpg compressie 80 / 14 kb
600px / jpg quality 19 / 14kb
Jpg compressie 19 / 14 kb (even groot als basis)
300px / jpg quality 80 / 14kb
Jpg compressie 80 / 14 kb
600px / jpg quality 50 / 21kb
Jpg compressie 50 / 21 kb (1,5x zo groot als basis)
300px / jpg quality 80 / 14kb
Jpg compressie 80 / 14 kb
600px / jpg quality 80 / 35kb
Jpg compressie 80 / 35 kb (volledig retina)

An English version of this blogpost is available here

Lees ook het vervolg artikel met meer tests en conclusies

Bewaren

Design Daan Jobsis

Over Daan Jobsis

Bedankt!

We hebben je emailadres ontvangen, we kunnen je nog beter van dienst zijn als we je nog wat beter leren kennen.
  • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.