En utmaning i följsam webbdesign är att kunna hantera bilder på ett optimalt sätt. Utmaningen är att inte låta enheten ladda ner mera bilder eller upplösningar än vad som är nödvändigt. Nästan alla som skapar följsam webbdesign idag struntar i att hantera bilderna på ett optimalt sätt och resultatet blir då att det tar längre tid för enheten att ladda ner och allt blir segare.
I en följsam webbdesign har man oftast 3-4 enhetsformat, och man delar grovt in dessa i desktop, tablet och mobiler, sedan brukar en del också göra ett till för liggande bredd i mobiler. Så man hamnar på 3-4 format som man behöver tillgodose med olika bildformat. När Apple introducerade retina-skärmar så fick webbdesigners plötsligt en anledning att dubbla antalet bildformat som behöver anpassas. En retina skärm behöver ungefär den dubbla storleken av samma bild som visas på en vanlig skärm för att den inte ska se suddig ut på den högupplösta retina-skärmen. Utmaningen är att servera rätt bild till rätt enhet utan att behöva ladda ner resten av formaten.
Det vanligaste sättet (och felaktiga med dagens mått mätt)
För att kunna visa en bild i stor upplösning så skapar de flesta en enda stor bild som man sedan skalar ned med hjälp av CSS (stilmall) t.ex. såhär max-width: 100% så att den även går att se på en liten skärm. Man låter helt enkelt den stora bilden bli nerskalad av webbläsaren till lämplig storlek. Om man dessutom ska tillgodose retina-skrärmarna måste bildupplösningen dessutom vara den dubbla vilket leder till väldigt stora bildfiler. Alla enheter måste ladda ner den största bilden oavsett om det är en liten mobil, tablet eller desktop. Problemet med detta är två:
- Tänk dig den som har mobilen, om man har flera sådana bilder på hemsidan så skulle det innebära att mobilen är tvungen att ladda ner åtskilliga mb av bildinformation som den aldrig kommer kunna använda. Detta är ett problem därför att små enheter har oftast begränsad överföringshastighet och det tar därför betydligt längre tid att visa bilden.
- Små enheter har också mindre minne än större enheter och är inte lika snabba vilket gör att hemsidan blir långsammare och onödigt seg att använda i en mobil enhet. När webbläsaren behöver skala en bild blir den också svårare att skrolla med och det hackar till när man skrollar upp och ner. Användaren upplever det som irriterande.
Syftet med följsam webbdesign är att en hemsida även ska fungera bra på mindre enheter så därför tycker jag tekniken att skala ner en bild i webbläsaren är felaktig i sammanhanget. Utvecklingen av mobila enheter går fort och de blir betydligt snabbare och då kan visserligen det här vanliga sättet vara att föredra för att det är enkelt att implementera. Men till och med de senaste mest kraftfullaste mobiltelefonerna såsom iPhone 5 och Samsung Galaxy II (Android) har problem med detta sättet så det krävs ännu snabbare för att det inte ska bli märkbart så än så länge måste vi designa på andra sätt. Det finns dock lite lösningar på detta och jag går igenom dessa här nedan.
Rekommendation 1 – använd vektoriserade bilder när det går
Vektoriserade bilder i formatet SVG stöds av alla moderna webbläsare och är en fantastisk bra lösning att visa bilder, logos och ikoner i knivskarp skärpa på små retina skärmar ända upp till den största desktop skärmen, trots att filstorleken är minsta möjliga. Mobila enheter visar dessutom vektoriserade bilder snabbt och de optimeras även internt av enheten helt automatiskt.
En variant är också att använda en font med ikoner och bildmaterial i när det handlar om tvåfärgade bilder, genom att skapa webbfonter och sedan visa dessa med hjälp av font-face kan man både skala och återanvända ikoner och bilder på sidan på ett effektivt sätt som fungera på alla enheter. Webbfonter är dessutom det rekommenderade formatet att använda istället för att skapa sprites av ikoner.
Tyvärr fungerar inte vektoriserade format så bra för att visa fotografier, utan formatet ska användas till anpassade texter, logos, ikoner eller annan bildstruktur på sidan.
Rekommendation 2 – skapa fler versioner bilder
Om man istället skapar en version av bilderna till varje storlek av den följsamma webbdesignen så kan man se till att webbläsaren bara laddar den som är aktuell med hjälp av olika tekniker. Det finns dock en massa fallgropar här då en del buggar i webbläsare osv gör att de ändå laddar ner alla andra versioner av en bild. Dessa problem kan man lösa genom att i servern neka nedladdning av bilder i fel format genom t.ex. cookies. Men för att slippa problem så är det är värt att utgå från lösningar som är välbeprövade. Jag rekommenderar smarta lösningar såsom PictureFill som är en JavaScript lösning som automatiskt använder/laddar ner den bilden som är lämpligast.
Att skapa fler versioner av bilder kan göras på olika sätt, det ena är att automatisera det med hjälp av ett server-skript, men det finns också gratis-tjänster som gör detta ”on the fly” som t.ex Sencha IO Image. Såhär skapar man med hjälp av deras tjänst automatisk skalning av en stor bild till att bara ha en bredd på 320px:
<img src="http://src.sencha.io/320/http://minhemsida.se/bilder/sidhuvud.jpg" />
Men ibland är inte en automatisk skalning av bilder att föredra utan man behöver manuellt beskära bilden så att den passar bättre i ett litet format. Se det här exemplet:
Om man skulle skala ner denna bild automatiskt till 100px skulle den se ut såhär:
Den blir inte särskild representativ på en mobil enhet så därför behöver man manuellt beskära den och anpassa för ändamålet, det här exemplet skulle passa bättre i ett mindre format:
En sista rekommendation
Egentligen bör man tänka på att designtekniken för detta idag förmodligen blir obsolet imorgon pga den snabba utvecklingen inom området. Så rekommendationen är att man alltid ska designa för att kunna anpassa sig till förändringar framöver så att man inte låser in sig på ett visst sätt.
Ni som tar bildhantering på internet med största allvar kan jag referera till följande som är värda att nämna i sammanhanget:
- WebP är ett nytt bildformat utvecklat av Google som är optimerat för webben och har minst 25% mindre filstorlek än jpg, png osv
- W3C rekommendationer för att hantera bilder i följsam webbdesign