Bilder får inte väga för mycket

Den stora utmaningen idag vad gäller bilder är deras "vikt". Många surfar idag genom sin mobil på det mobila datanätet och det medför begränsningar. Vi tror kanske att alla har bredband med bra anslutning, medan det i själva verket finns många som har en fast uppkoppling hemma eller på kontoret som inte alls är särskilt snabb.

När en uppkoppling blir långsam gör det att det tar tid att ladda hem bilder. Därför är det viktigt att anpassa bilderna för webben, genom att försöka komprimera dem så gott det går. Mycket av detta sköts redan av tekniken. Om en bild är sparad som JPEG eller PNG är den redan komprimerad tack vare formatet. JPEG är lämpligast för bilder med "komplexa" motiv så som landskap, personer m.m, medan PNG är bäst för bilder som är mer grafiska - exempelvis större ytor i samma färg.

Men även om en bild är i rätt format kan den vara i för hög upplösning. En JPEG-bild som du tar med en kamera eller mobil har oftast en upplösning som är onödigt stor för webben. Här är det bäst att förlita sig på de otimeringar som olika verktyg redan gör, exempelvis kommer säkert det CMS (publiceringsverktyg för webb) du använder att minska storleken automatiskt och det gör även Facebook och andra sociala medier i viss utsträckning. Om verktyget inte gör detta finns det även verktyg för just detta.

Bilders dimensioner


Det finns också en del begränsningar i sociala medier där bilder ska följa vissa dimensioner för att visas bra. Via länken kan du läsa om vilka format som gäller i de största sociala medierna för tillfället. Men tänk på att dessa uppdateras då och då så du behöver hålla dig á jour kring detta även i framtiden.

2018 Social Media Image Sizes Cheat Sheet - Make A Website Hub

Bilder för mobil


Vi har redan nämnt bilder och anpassning av dessa tidigare i kursen. Det man kan säga om bilder i mobilen är framförallt att de behöver ha låg vikt så att de går snabbt att ladda. Detta beror på att mottagarna ofta befinner sig på mobilnätet med sämre hastighet. Dock ska man idag även tänka på att det är väldigt hög upplösning på mobilskärmar så man kan behöva ha relativt högupplösta bilder för att kunna få bra kvalité på dessa i mobilen.

Det finns många olika tillverkare av telefoner idag och tyvärr har vi inte hittat någon bra sammanställning av alla olika skärmar och upplösningar. Men i artikeln nedan bör du läsa igenom delen om “Resolutions and Display Specifications” ner till “App icons”, där det på ett bra sätt förklaras hur upplösningen på iPhone fungerar och hur stor den är. De flesta Android-telefonerna idag matchar dessa också.

Artikeln finns här: http://ivomynttinen.com/blog/ios-design-guidelines