Bildhantering på en webbsajt

En del av en webbsajt som både Google och besökarna påverkas av är – bilderna.

Det är ofta bilderna som lyfter fram en webbsajt och skiljer den från mängden. Men här är det många webbdesigners och tom ”webbyråer på fina gatan” som slarvar ur flera aspekter.

Här beskriver jag lite kortfattat de viktigaste aspekterna av bildhantering för webben.

Det första man måste tänka på är upphovsrätten. Man kan inte bara googla efter en passande bild, högerklicka och spara ner bilden och sedan använda den. De flesta bilder är upphovsrättsskyddade. Det skulle vara intressant att veta – hur många brott mot upphovsrättslagen som begås på de otaliga bloggar som lägger ut bilder som i många fall inte ser ut att kunna vara deras egna.

Den andra saken är det som kallas ”above the fold”. Med det menas ursprungligen den övre halvan av en tidnings förstasida där viktiga nyheter eller en viktig bild oftast placerades. Tidningarna viktes ofta på så sätt att bara den övre halvan av tidningen syntes och tanken med det var att det som syntes där skulle locka till att man köpte tidningen.

Begreppet above the fold (även above the scroll används) har sedan överförts till webbdesign och avser då den övre halvan av en webbsajt dvs. den del som är synlig utan att man behöver scrolla. Eftersom skärmstorlekarna varierar väldigt i storlek och upplösning så är det inte definierat hur många pixlar som avser gränsen utan det varierar.

Det här är viktigt för i första hand startsidan – som oftast är den som skall fånga besökarens uppmärksamhet. Men även Google vill hitta ”content” dvs. indexerbart innehåll så tidigt som möjligt på sidan dvs. above the fold.

Man ser många WordPress sajter där hela översta halvan av startsidan är en enda stor bild eller ännu vanligare – ett bildspel. Det är inte optimalt ur Google perspektiv.

Nästa viktiga sak som många också glömmer, speciellt de rena amatörerna – är bildstorleken. För att sidan skall ladda snabbt får inte bilden/bilderna vara för ”tunga” dvs. i kb och laddninsgtiden är även en av de faktorer som Google tar med i sin rankingbedömning. Tar man en bild direkt från t.ex. digitalkameran så är den ofta flera MB stor, men det räcker men kanske 5o kb. Vad man skall göra är att minska både bildens fysiska storlek i antal pixlar till ungefär den storlek den skall ha på webbsidan (helt exakt den storleken), och sedan reducera antalet färger. En originalbild innehåller flera miljoner färger men för att se bra ut på en webbsajt så räcker det med en bråkdel av detta.

Man kan också behöva beskära bilden dvs. ta bort ovidkommande eller störande delar och lyfta fram huvudmotivet. Friläggning av bilder innebär att man frilägger själva huvudmotivet från bakgrunden vilket är vanligt för produktbilder på webbshop sajter.

(Här kan du läsa mer om just redigering och friläggning av produktbilder)

Nu finns det flera bra sajter på nätet dit man kan ladda upp sina bilder, få hjälp med att redigera bilderna, frilägga bakgrunder, ändra färger, placera in en logga på lämplig plats osv. Redigerabilder.com är ett exempel på en sajt som frilägger bilder och även gör andra åtgärder för att förbättra och anpassa en bild till t.ex. en webbsajt. Man laddar upp sina bilder via Dropbox och efter 3 dgr får man tillbaka dem – via samma Dropbox. (Man kan även ladda upp bilderna via deras formulär på hemsidan eller via FTP).

Det är ganska billigt. Arbetet utförs av billig arbetskraft i Nepal hos webbyrån WebsearchPro som också har utvecklare som utvecklar webbsajter i bl.a. responsiv design i WordPress.