Så undviker du fula bilder på webben

Du möter dem överallt på webben; människor med konstiga hudsjukdomar och onaturliga färger. Ett bildredigeringsprogram och en snäv syn på webbilder är ett livsfarligt vapen.

Webben är bäst på att förmedla text. Text går snabbt att transportera elektroniskt. Datorer kan kommunicera text med varandra, men för t.ex. en sökmotor betyder en bild knappast »mer än tusen ord«.

Men bilder är bra, bilder är trevliga och bilder kan lätta upp. Kort sagt, vi behöver ha bilder på webben. Men eftersom bilder äter bandbredd (alltså hastighet), så redigeras i stort sett alla bilder på webben för att laddas så snabbt som möjligt på vägen mellan webbserver och din dator.

Det är här folk börjar få hudsjukdomar.

Att anpassa bilder för webben är detsamma som att reducera bildinformation, dvs. kvaliteten på bilden. I princip är låg kvalitet detsamma som snabb bild.

Frågan är hur långt man kan gå och till vilket pris. Ful grafik på webbplatser gör inte bara att människor – och annat – på bilderna ser konstiga ut, det drar också ned intrycket av webbplatsen. Det ser oseriöst ut. Kanske amatörmässigt. Rent av klantigt.

Låt mig först visa hur skillnaderna i kvalitet kan te sig. För att inte hänga ut människor på misslyckade bilder – som faktiskt inte rår för att de ser konstiga ut på dessa bilder – använder jag en bild på mig själv.

JPG, Maximal kvalitet, 12,5KB JPG, Hög kvalitet, 8KB
JPG, Maximal kvalitet, 12,5KB. JPG, Hög, 8KB. Liten skillnad, kladdigt kring bokstäverna på jackan.
JPG, Mellan, 5KB JPG, Låg, 3KB
JPG, Mellan, 5KB. Diffust kring konturer. När bilden är så här liten kan det vara okej. JPG, Låg, 3KB. Vad har hänt med linsen? Helt obrukbar.
GIF, 256 färger, 15KB GIF, 128 färger, 13KB
GIF, 256 färger, 15KB. Kristallklart, men väger för mycket i förhållande till storleken. GIF, 128 färger, 13KB. Reduktion märks knappt, fortfarande för tung.
GIF, 32 färger, 7KB GIF, 16 färger, 6KB
GIF, 32 färger, 7KB. Tydlig reduktion, färgerna läcker till andra områden (t.ex. röda prickar på den mörka bakgrunden). Med lite redigering kan den fungera. GIF, 16 färger, 6KB. Röda hund? Helt obrukbar, ändå ser man den här typen ganska ofta. Låg kvalitet och liten bild – ändå ganska tung.

Generellt brukar man hålla sig till att använda JPG för »vanliga bilder«, alltså porträtt, landskap osv. och GIF för grafik, logotyper, navigeringsknappar m.m. Men ingen regel är ju utan undantag, så det gäller att testa sig fram.

Det viktiga är att bestämma sig för vad det är man kan reducera, vilken kvalitet kan man kompromissa med? Istället för att göra en stor bild småful, så kanske man kan dra ned storleken och därigenom vinna bandbredd.

Det finns ett område där du aldrig, aldrig ska dra ned på kvaliteten: logotyper. Kosta vad det kosta vill, men en logotyp får inte tappa sin identitet och effekt.

Nåväl, hur ser det då ut i verkliga livet? Jag presenterar här några exempel. De är inte valda för att hänga ut någon eller några, utan ska bara illustrera vad jag menar.

Sloggyreklam (klicka för hela annonsen)Jag misstänker att underklädestillverkaren Sloggy vill förmedla att deras produkter står sig bra till en »förtjusande bakdel«, men i den webbannons man presenterade 2003 ser modellen i fråga mest hudskadad ut. Bannerannonsen är beskuren, men kvaliteten har inte reducerats ytterligare. Klicka för att se hela annonsen (öppnas i nytt fönster).

Böcker från Forum (klicka för originalstorlek)Vissa motiv är mindre lämpade att fotografera, särskilt med en lite enklare digitalkamera. Böcker, till exempel. Att plåta böcker med blixt är svårt, som exemplet till vänster visar (klicka för att se bilden i originalstorlek). Den skulle kunna vara tagen från vilken webbplats som helst; jag har själv tagit liknande bilder. Men snyggt är det inte. Dessutom är bilden i original sparad som GIF, med en matchvikt på 85KB… knappast något man bör välja för en allmän illustrationsbild.

Ryan Giggs i Manchester United

Mycket pengar behöver inte betyda hög kvalitet. Inte på bildbehandlingen, i alla fall. Miljardindustrin Manchester United, ett av Europas ledande fotbollslag, presenterar t.ex. sin stjärna Ryan Giggs (bilden ovan) med en suddig och ful bild som borde reducera hans marknadsvärde betänkligt. Inte bara löses konturerna upp, även ansiktet krackelerar i pixliga block…

Detalj från www.prep.caltrack.com (klicka för hela bilden)Ett vanligt område där misshandel av människors utseende möter klichéer och dålig form är vad som kommit att kallas Photoshopbarock. Navigeringsfält, logotyper och välkomstsidor fylls av kollage med sammanflätade bilder, ungefär som det man ofta ser på filmaffischer. Något som kan se mycket effektfullt ut, men som är extremt svårt att lyckas med. I detta exempel, hämtat från en amerikansk friidrottssajt om unga talanger, begås åtminstone två misstag:

  1. Bilderna har sparats som JPG och när man reducerat så mycket som möjligt blir det bara en enda soppa av alla konturer. Måste man ha en sådan här bild, är GIF att föredra (och genom redigering få det att se juste ut).
  2. Kollaget är statiskt genomfört. Själva poängen med ett kollage är att undvika webbens inneboende kantighet (fyrkantiga skärmar, fyrkantig layout). Det är själva motivet med metoden… som här utförts med bevarad kantighet.

Detalj från Skavstas webbplats (klcika för hela bilden)Ibland stöter man på exempel som inte borde vara möjliga, som man misstänker beror på ett tillfälligt fel, serverhaveri eller någon annan naturkatastrof. I det här fallet har jag återvänt gång på gång – och bilden var kvar i flera år. Under rubriken FaciliteterSkavsta flygplats webbplats möttes besökaren av en vy från baren. Suddiga bilder är modernt och ska förmedla en känsla av rörelse, fart och fläkt, saker på gång… Men titta noggrannt på denna illustrerande bild från Skavstas officiella webbplats och säg mig vad du tänker! Vad har han druckit? Vad skrattar hon åt? Vilken destination ska de till? Får han överhuvudtaget följa med?

Ja, det är helt obegripligt!

Banner från Försäkringskassan

Ibland kanske bilder är medvetet fula, för att fulheten rimmar med bildens budskap? Jag är inte säker på att detta är avsikten med Försäkringskassans banner för kampanjen Sveriges ohälsa, men visst är det möjligt? Grafiken andas hursomhelst en känsla av ohälsa och detta område är värt att undersöka vidare…

Sammanfattningsvis är mitt entydiga råd: ska du ha bilder, så ha bra bilder. Visst har många bredband, men lika vanligt är mobila uppkopplingar med små skärmar och osäkra hastigheter. Kompromissa inte med kvaliteten, men var försiktig med besökarnas tålamod.

Leave a Reply

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.