Bildhantering för webben - kom igång guide

Bildhantering för webben - kom igång guide

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 design, och det finns bra information på nätet.

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

    • Related Articles

    • Kom igång med Cookiebot

      I denna artikel kommer vi gå igenom hur du kommer igång med att använda Cookiebot. Idag måste varje webbplats följa regler relaterade till integritet och behandling av personlig information. Med explosionen av dataskyddslagar runt om i världen måste ...

    • Kom igång med NEH go!

      Nedan finner du relevanta länkar till artiklar som kan vara bra att läsa för att kunna komma igång ordentligt med er butik. Relevanta artiklar: Videoguide: Layouteditorn del 1 - Grunderna Videoguide: Layouteditorn del 2 - Lägga till ett block ...

    • Kom igång med Google Analytics 4

      I denna artikel kommer vi att gå igenom hur du lägger in din spårkod för Google Analytics 4 och var du hämtar ut koden. Den 1 juli 2023 bearbetas inte data längre i standardegendomar i Universal Analytics. Du kan se dina Universal Analytics-rapporter ...

    • Videoguide: Peka Domän

      Videon nedan är en enkel komma-igång-guide som steg-för-steg demonstrerar hur du får er domän att peka mot er butik. Tips! Glöm inte att även lägga in eventuella omdirigeringar (Redirects). Detta kan du läsa mer om här.

    • Kom igång med Rule

      I denna artikeln kommer vi gå igenom hur du kommer igång med Rule. För att implementera Rule så behöver du först ha skapat en prenumeration via Rule. Har du inte gjort det kan du gå till Partners -> Rule i admin och trycka på "Kontakta oss för en ...