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.

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!