Bildhantering för webben


En webbsida består oftast av 80% bilder, så det är viktigt att bilderna är optimerade för att ge en bra besökarupplevelse. Syftet med optimeringen är att få ner filstorleken så mycket som möjligt utan att försämra bildkvaliteten.


Här en en guide i bildhanteringens grunder som hjälper dig att ge din butik bästa möjliga besökarupplevelse:


Ladda inte upp dina originalbilder till servern


Visserligen kommer bilderna att skalas om till rätt storlek, men de kommer inte att optimeras. Gör alltid optimeringen på din egen dator, och ladda upp de optimerade kopiorna. Spara originalen på din egen dator eller på en extern hårddisk.


Spara bilderna i rätt filformat


De vanligaste filformaten för bilder är JPEG (.jpg) och PNG (.png). En bra tumregel är att alltid spara fotografier som JPEG och illustrationer (t.ex. logotyper, ikoner och diagram) som PNG. Då får du bästa resultatet i förhållande till filstorleken.


Spara bilderna i rätt bildstorlek


I tabellen nedan ser du de maximala storlekarna för olika bildtyper. Det finns ingen anledning att spara i större format än så.


Kolumnen Filstorlek visar ungefärlig filstorlek efter optimering.



Bildtyp 
Bildstorlek 
Filstorlek 
Produktbild  780px x 790px 50 - 120 kb
 Kategoribild 1200px x 382px 70 - 150 kb
 Logotyp 440px x 100px 10 - 70 kb
 Bildspel 1200px x 382px 70 - 150 kb
 Bildspel 1900px x 605px 100 - 250 kb


 

Optimera bilderna


Optimering innebär att bilderna komprimeras. Komprimeringen påverkar inte bildstorleken (mätt i pixlar), med filstorleken minskar rejält. Så här går det till: När du sparar din bild som JPEG eller PNG i ditt bildredigeringsprogram ser du en inställning som heter Kvalitet. 100% betyder 'ingen komprimering'. Välj 80%, det ger ingen synlig skillnad på skärmen, men kan minska filstorleken till en femtedel eller mer.


I praktiken betyder det att om bilderna på din startsida tar 2 sekunder att ladda kan du minska den tiden till 0,4 sekunder efter optimering.


Har du många bilder kan det vara tidsödande att optimera dem en och en i ditt bildbehandlingsprogram. Då kan du använda en online-tjänst som låter dig ladda upp flera bilder åt gången för optimering, t.ex. TinyJPG (för JPEG-filer) och TinyPNG (för PNG-filer). De är gratis att använda.


Mer information


Vi har fler artiklar under Layout och innehåll, och det finns bra information på nätet.


Kontakta oss om du behöver hjälp med din bildhantering!