Retina images

Enige tijd geleden wijdden we een blog aan de mobiele kijk op het web. De verschillende types apparaten, met sterk uiteenlopende schermgroottes, hebben veel invloed op hoe wij websites en (web)applicaties ontwerpen en opbouwen. Daarnaast zijn er veel apparaten op de markt met "retina" of soortgelijke displays; displays met een grotere pixeldichtheid, waardoor de pixels niet meer zijn te onderscheiden.

Een voorbeeld hiervan is de iPhone 4, waarbij Apple het aantal pixels in de breedte en hoogte van het scherm heeft verdubbeld bij de overgang van de iPhone 3GS naar de iPhone 4. Om het voor (web)developers behapbaar te houden, en om de weergave van websites consistent te houden, is de 'viewport' (de resolutiegrootte waar de browser mee rekent) echter wel gelijk gebleven. Een pixel in de browser bestaat zo dus uit 4 pixels op het scherm.

Om de grafische elementen van een website scherp weer te kunnen geven op het complete scala aan resoluties, al dan niet retina, is het van belang dat ze goed schaalbaar zijn. Met de inmiddels brede ondersteuning van CSS3 kunnen veel van deze elementen inmiddels door de browser gegenereerd worden, zonder dat hier images aan te pas hoeven te komen.Denk hierbij aan bijvoorbeeld box-shadows (schaduw) en gradients (kleurverloop). Afbeeldingen zijn echter nog steeds gerasteriseerd, niet opgebouwd uit vectoren, en daarmee niet zonder kwaliteitsverlies te vergroten.

Daarmee komen we uit bij de uitdaging waar we in deze tijden van diversiteit aan devices en internetverbindingen veel mee te maken hebben. Een afbeelding op volle resolutie weergeven op een retinascherm geeft een mooi en scherp resultaat - "stunning" zouden ze dat in California noemen - maar zorgt er wel voor dat er een bestand met 4x zo veel pixels en dus een (bijna) evenzoveel forsere bestandsgrootte ingeladen moet worden. Dit is wellicht niet persé vervelend is op een dikke breedbandverbinding, maar zal op een brakke 3G verbinding toch een wat minder prettige gebruikservaring opleveren, nog maar te zwijgen over de grotere hap die het uit je maandelijkse databundel neemt. 

Het zou dus wenselijk kunnen zijn om die grotere afbeeldingen alleen in te laden wanneer het device dat ze opvraagt daadwerkelijk een retina display heeft. Geen nutteloos gedownloade bits dus. We hebben onderzoek gedaan naar verschillende methodes om afbeeldingen in te laden, afhankelijk van het display dat ze zou gaan vertonen. Er zijn goed geschikte javascript methodes om het te detecteren en we hebben inmiddels zelf ook een mooie LESS-mixin ontwikkeld die met behulp van mediaqueries de juiste afbeelding selecteert. Deze laatste methode zetten we tot voor kort in, tot we een interessante bevinding van Daan Jobsis tegenkwamen. Door slim gebruik te maken van JPG compressie blijkt het mogelijk om zowel een scherpe (hoge resolutie) als kleine (qua bestandsgrootte) afbeelding te krijgen. 

The magic

Een JPG compressiewaarde die veelal gebruikt wordt als een goede afweging tussen de kwaliteit van een afbeelding en bestandsgrootte is 80% - de meningen zijn hierover verdeeld, don't bite me. De resolutie van een afbeelding 2x zo groot maken, zodat hij geschikt is voor weergave op een retinascherm, levert bij eenzelfde compressie van 80% een beduidend groter bestand op. Wanneer je deze afbeelding met dubbel zo grote resolutie verder comprimeert neemt het bestandsformaat weer af, en bij een compressie van ongeveer 40% (afhankelijk van de afbeelding zelf) heeft de grotere afbeelding weer eenzelfde bestandgrootte als de originele afbeelding. Helaas zal de hogere compressie er voor zorgen dat er flink veel zichtbare artefacten zichtbaar zijn in de afbeelding, niet echt meer een plezier om naar te kijken. Echter - and this is where the real magic happens - wanneer je de grotere afbeelding weer schaalt naar dezelfde afmetingen als de originele afbeelding zul je zien dat de artefacten als sneeuw voor de zon verdwijnen! Heel mooi allemaal natuurlijk, maar op je normale, niet retina, (desktop)scherm merk je weinig van deze revolutie (al hebben we het idee dat deze techniek voor sommige afbeeldingen toch een scherp resultaat oplevert!). De echt aangename verrassing krijg je als je dezelfde afbeeldingen opent op een retina scherm, ook hier zijn de artefacten die de hogere JPG compressie oplevert nauwelijks zichtbaar. Zonder de bestandsgrootte van de afbeelding te hebben hoeven wijzigen of een compromis te hoeven doen in de kwaliteit hebben we dus een scherp resultaat gekregen op retina schermen. Sounds too good to be true, right? Hieronder een aantal voorbeelden om de bevindingen te bevestigen. 

300x200px


300x200px, 80% compr., 32 KB

600x400px


600x400px, 80% compr., 100 KB


300x200px, 80% compr., 32 KB


600x400px, 40% compr., 36 KB


300x200px, 80% compr., 42 KB


600x400px, 80% compr., 152 KB


300x200px, 80% compr., 42 KB


600x400px, 40% compr., 46 KB 


300x200px, 80% compr., 34 KB


600x400px, 80% compr., 81 KB


300x200px, 80% compr., 34 KB


600x400px, 40% compr., 30 KB 

 

Kanttekeningen

Zoals altijd zijn er kanttekeningen te plaatsen bij de methode. Als je met je neus op het scherm van je iPad gaat zitten zul je de artifacten wel degelijk kunnen waarnemen - zij het minimaal. Daarnaast hangt het succes af van de afbeelding. Bij sommige afbeeldingen werkt het goed tot een compressie van 30%, maar bij andere afbeeldingen zijn er al artefacten waar te nemen bij een compressie van 50%, geen magic number wat betreft de compressie dus. Daarnaast zul je bij afbeeldingen met grote vlakken in dezelfde kleur (met name de kleur rood), waar JPG compressie sowieso niet de meest efficiënte keuze is, erg vlug vertekeningen zien optreden. Per afbeelding zullen de optimale settings dus moeten worden bekeken. Daarmee is de methode direct een stuk minder toepasbaar, aangezien automatiseren (bij bijvoorbeeld gebruik in een CMS) niet goed mogelijk is. Tevens zijn de afbeeldingen minder geschikt om op te slaan door bijvoorbeeld de bezoeker van de website, aangezien daarbij de artefacten weer zichtbaar worden. Desondanks zien wij de methode, indien zorgvuldig toegepast, in veel gevallen als goed geschikt en breder inzetbaar dan eerdere methodes, aangezien slechts één versie van een afbeelding hoeft te worden opgemaakt.