iPhone och iPad har haft det sedan 2010. Nu har även Macbook Pro det! Jag pratar om Retina Display (HiDPI) som ger användaren en knivskarp bild på skärmen. Men bara om grafiken är anpassad för det…
Uttrycket Retina kommer från Apple och innebär i korta drag att densiteten på pixlarna på skärmen är tätare än vad de är på en normal skärm. Detta resulterar i att ögat inte lyckas särskilja pixlarna på skärmen lika lätt, något som i sin tur gör att vi upplever det skarpare från ett visst avstånd. En retina display har ca dubbelt så hög upplösning som en vanlig skärm.
Som utvecklare av mobila appar blev det 2010 ett jobbigt extraarbete för de som ville anpassa sina spel och program så att de såg snygga ut på Retina-skärmar.
Det innebar att man istället för att använda En bild, var tvungen att använda flera uppsättningar; En för gamla skärmarna och En för de nya. Genom att skapa en extrabild med filnamntillägget @2x (ex. minbild@2x .jpg) så kunde man tala om för retinaenheten att det fanns en alternativ bild som hade högre upplösning.
Tydligast blev skillnaden på de ikoner som användes i en App. Utan stöd för högupplöst skärm så såg dessa väldigt oskarpa och blurriga ut på en Retina-enhet.
MacBook Pro med Retina
Nu har Apple utökat sitt utbud av skärmar med stöd för Retina, till några av deras datorer. (Underteckad sitter just nu och skriver på en Macbook Pro med retina display.) Detta ställer givetvis till det för alla programutvecklare och webbdesigners.
De flesta datorprogram är (i skrivandets stund), på samma sätt som tidigare mobilappar, anpassade för att se bra ut på en skärm med normal skärmupplösning. Det betyder i korta drag att en bild som ska presenteras i skalan 100px * 100px, ser bra ut på normala skärmar när den faktiska bildens mått också är 100px * 100px. Men detsamma gäller inte om bilden ska visas på en Retina-display. Den kommer inte att se lika skarp ut. Detta pga att bilden kommer att skalas upp från 100px till 200px i bredd och höjd. Retina har ju dubbelt så hög upplösning som en vanlig skärm och vill därför även visa bilden med den upplösningen.
Notera dock att inte själva bildstorleken på skärmen kommer att ändras. Det är densiteten, pixeltätheten som förändras och det gör den genom att använda de “extra” pixlar som finns i bilden med dubbelt så hög upplösning.
Här är ett exempel på hur utseendet skiljer sig från vanlig upplösning och när de visas på en skärm med Retina:
Så vad innebär detta för oss som designar webbsidor och system för datorskärmen?
För det första så är det främst en kosmetisk fråga. De ikoner, logotyper och bilder som idag visas kommer fortfarande att vara så pass tydliga att det går att urskilja vad de betyder/ser ut som.
Ren text/typsnitt hanteras rakt av i webbläsaren eftersom det är uppbyggt av vektoriserade banor och enkelt kan skalas upp utan att tappa kvalitet. På samma sätt kommer det att se bra ut om man väljer att använda SVG-formatet för sina bilder/illustrationer/ikoner.
Vill man däremot att ens webbsida eller system ska se lika skarpt ut oavsett vilken enhet man kollar på. Ja då måste man göra lite extrajobb. Första steget är att ta fram en dubbelt så stor bild för alla bilder som används på sajten/i systemet.
Rätt bild för rätt upplösning
Sen måste man på webbsidan lägga in en kodsnutt som läser av vilken upplösning besökarens skärm använder. Beroende på upplösningen väljer man sedan att presentera en högupplöst bild (för retina) eller en normalupplöst bild.
Nackdelen med detta är att även om allt kommer att se skarpare ut på Retina så kommer den sidan att ta längre tid att ladda in. Detta eftersom varje bild egentligen är dubbelt så stor.
Jag avslutar med att tipsa om Retina.js, ett script som hjälper till att hantera en extra uppsättning bilder för skärmar med Retina.
https://retinajs.com
Jag har personligen nu använt min Retina MacBook i ca en vecka och kan konstatera att jag varje dag vid uppstart blir lika förvånad av hur skarp bilden är. Det går säkert över med tiden, men så länge det finns webbsidor och program som inte har stöd för Retina så kommer jag att störa mig på att saker och ting inte är så skarpa som de kan vara.
Tack för bra info!