Iphone 4 dubblerar skärmupplösningen
I och med Iphone 4 ökar upplösningen på telefonen rejält till hela 326 pixlar per tum. Ett bra sätt, för den som publicerar innehåll, att dra nytta av det är att se till att det finns skalbara bilder att visa.
Det kan vara ganska svårt att greppa exakt hur stor skillnad det är mellan 110 ppi (som en Macbook Pro har) och 326 ppi på nya Iphone. För att sätta det i perspektiv har bilden nedan den gamla Iphone, nya Iphone 4, Ipad och Safari på en dator laddat samma webbsida. Enheterna visas med samma pixelstorlekar, vilket gör att man ser hur mycket som får plats på skärmen jämfört med de andra enheterna.
Betänk att Iphone och Iphone 4 kommer att ha i princip lika stor skärm (3,5 tum), men att de här visas i faktisk pixelstorlek.
Eftersom pixlarna krymper på de högupplösta enheterna så kommer man inte att kunna se de enskilda pixlarna, utan istället kommer man uppleva att bilder och illustrationen blir extremt skarpa. Samma sak med text som kommer att bli otroligt behaglig att läsa, och inte alls svår att urskilja i mindre grader. I en dagstidning är ofta texten tryckt i 6–8 punkter, vilket motsvarar ungefär 8–10 pixlar på en traditionell skärm. På Iphone kommer istället den texten att bli satt i 24–30 pixlar. En otrolig skillnad i skärpa.
Viktigt att veta är också att samtliga Iphone, inklusive Iphone 4, rapporterar skärmstorleken som 320 × 480 pixlar till webbläsaren. Det är alltså skillnad på enhetens faktiska upplösning och den upplösning som används för layout i webbläsaren (och övriga program). Tyvärr används pixlar som måttenhet överallt, vilket gör att det kan bli lite förvirrande. Man måste alltså mentalt göra skillnad på layoutpixlar och enhetspixlar. I Iphone 4 skiljer de sig åt från varandra. Trots att skärmen klarar att visa 640 pixlar så får en bild angiven till 320 full skärmbredd. Nedan använder vi enbart layoutpixlar som måttenhet.
Så här kan du förbereda dina bilder
Eftersom inga webbläsare klarar av att läsa informationen om upplösning i en bild (pixeltätheten) utan bara klarar dimensionerna (bredd × höjd) måsta man utgå från de förutsättningarna.
För pixelbilder gör man helt enkelt så att man dubblerar de verkliga dimensionerna i bilden, och anger dem till hälften. På det viset dubblerar man upplösningen och får bilden att dra nytta av den högupplösta skärmen. Rent praktiskt gör man alltså så att om bilden ska visas i en spalt som är 600 pixlar bred så gör man bilden i 1.200 pixlar och sätter bredden i koden till 600. På följande sätt:
<img src="bilden.jpg" alt="Högupplöst bild" width="600" height="400" />
Då kommer webbläsaren att visa bilden i full spaltbredd med så många pixlar som enheten klarar av att visa.
I bilden ovan har fotot en faktiskt bredd av 590 pixlar men visas med en bredd av 284. Alltså lite drygt dubbla upplösningen, vilket gör att skärmens faktiska förmåga av 480 pixlar nås utan problem, och vi därför inte upplever någon taggighet i bilden.
För bilder angivna som bakgrundsbilder i CSS får man använda regeln background-size för att göra omsamplingen av originalbilden. Här gäller samma sak som för <img>, alltså att man sätter de dimensioner man vill att bilden ska samplas om till. För samma bild som ovan blir det alltså:
background-size: 600px 400px;
På det viset trycks bilden ihop till att ta max 600 pixlars bredd i anspråk i layouten, men klarar enheten en högre upplösning finns fler pixlar att ta av.
Firefox har ännu inte fullständigt stöd, utan kräver att regeln prefixas för att den ska förstå den.
-moz-background-size: 600px 400px;
Skalbar objektgrafik
En annan lösning är att använda skalbar grafik som SVG eller PDF istället för pixelbilder. Det fungerar bra med SVG i Webkit-läsare som Safari och Mobile Safari, medan PDF buggar en aning i Mobile Safari. Tyvärr har inga andra läsare utbyggt stöd för PDF alls, och Geckoläsare som Firefox klarar enbart SVG i en object och alltså inte i CSS eller img.
Bästa lösningen just nu
Vill man ha stöd för hög upplösning är det pixelbilder som är den mest robusta lösningen för tillfället. Fördelen med högupplösta bilder är att de tål kraftig skalning av sidan i webbläsaren. I bilden nedan har sidan förstorats rejält, och det syns tydligt att logotypen i sidhuvudet inte är högupplöst, medan ikonerna för mejl och Facebook är det.
Man kan alltså tjäna på att använda högupplösta bilder även om man inte specifikt riktar sig mot en enhet som Iphone 4.