En bild säger mer än tusen ord
Det finns ett talesätt som säger att en bild säger mer än tusen ord och det är just därför som bilder är så viktiga i e-handeln. Vid köp av varor på webben måste kunden använda bilderna för att uppfatta produktens färg, kvalitet och få en känsla för produkten utan att ha den framför sig.
Det är viktigt att bilderna är skarpa och högupplösta men denna typ av bilder har också ofta stora filstorlekar vilket riskerar att göra din hemsida långsam att använda. Kunder som inte orkar vänta kommer att lämna sidan och med tiden kommer Google märka av det, vilket kan påverka din sökmotoroptimering (SEO).
När du sparar en bild för din webbplats så är det viktigt att hitta en bra balans mellan bildfilstorlek och bildkvalitet. I det här inlägget visar vi hur du gör just det.
Den här vägledningen är för dig som har en långsam webbplats med massor av bilder, för dig som ännu inte börjat bygga din webbplats, för dig som inte har någon officiell kunskap eller metod för att spara bilder med tanke på filstorlek samt för dig som brukar ta ett produktfoto och sedan ladda upp det direkt på webbplatsen.
Olika alternativ av bildfiler
När det gäller att spara bilder som är optimerade för webben så ska vi fokusera på tre filtyper. Dessa filtyper är JPG, PNG och GIF. De olika filtyperna har olika styrkor och svagheter och dessa ska nu gås igenom för att du ska kunna välja den filtyp som passar din hemsida och behov.
Arbeta med JPG-filer
Den mest populära filtypen som används för bilder på webben är JPG, som även kallas JPEG. Eftersom JPG har en mycket stor färgpalett att använda sig av så är den här filtypen perfekt för fotografier och för komplexa bilder som innehåller många färger, mönster eller skuggor.
Det går också att spara JPG bilder i olika kvaliteter vilket är mycket flexibelt utifrån det behov som finns gällande filstorlek och kvalitet.
Användning för webbföretag:
Som det mest populära filformatet på webben så används JPEG för fotografier, produktbilder och hemsidans banners eller bilder.
Arbeta med PNG-filer
Ett annat populärt filformat på webben är PNG. Du kan spara PNG-filer som PNG-8 eller PNG-24 i Adobe Photoshop.
- PNG-8 har en begränsad färgpalett bestående av 256 färger vilket ger en mindre bildstorlek. Den lämpar sig därför sämre för fotografier eller komplexa bilder.
- PNG-24 ger en mer högkvalitativ bild, men det innebär även en större filstorlek.
En av de största skillnaderna mellan JPEG och PNG är att PNG kan hantera transparenta bakgrunder.
Användning för webbföretag:
På grund av de är högkvalitativa och kan hantera transparens så används PNG vanligtvis till logotyper, då dessa nästan alltid kräver transparens. Troligtvis vill du att din logga är av hög kvalitet och då loggan ofta bara är en liten del av webbplatsen så är ändå filstorlek liten.
Arbeta med GIF-filer
GIF-filer är inte lika populärt som det var för många år sedan. Men för små bildstorlekar som bara har ett fåtal färger så är det fortfarande ett användbart alternativ. Du bör inte använda dem för produktfoton då GIF-filer har samma begränsade färgpalett på 256 färger som PNG-8.
Användning för webbföretag: GIF kan användas för logotyper men är inte speciellt populärt att använda i e-handeln på grund av den begränsade färgpaletten.
Spara bilden på rätt sätt
Det tar självklart längre tid att ladda in en stor bild än en liten bild. Med stor bild menas att bildens fil är stor, inte att dess dimensioner är stora. Filens storlek anges i värden som KB, MB, GB och så vidare. Bland webbanvändare så förväntar sig 47% att en hemsida ska laddas in på under 2 sekunder och 40% lämnar sidan om det tar mer än 3 sekunder att ladda in den. Därför är det viktigt att dina bilder har lagom stora filstorlekar för att din webbplats ska vara tillräckligt snabb.
För att optimera dina bilder för din webbplats så finns det några saker du kan göra:
- Spara bilden i rätt dimension
För att se bilden i den storlek som den kommer visas i på webben när du laddat upp den så ska du öppna den i Photoshop och visa den på 100%. Detta hjälper dig hitta rätt dimensioner för bilden.
- Spara bilden för webben
Det går att minska bildens filstorlek utan att orsaka en stor försämring av kvaliteten. En bra metod för att göra detta är att använda Photoshops ”Spara för Webben” funktion. Du gör detta genom att öppna din bild i Photoshop och sedan gå till Arkiv>Exportera>Spara för webben (gammalt). Detta öppnar ett fönster där du kan välja din exportkvalitet. En kvalitet på 60 är ett bra alternativ då det inte försämrar kvaliteten märkbart men ändå får ner filstorleken till under en megabyte (MB).