Vad är bildoptimering? Åtta tips för din webbplats (2026)

I en värld där dina kunder förväntar sig omedelbar respons är en e-handelswebbplats som laddar snabbt helt avgörande. Responsiva bilder är bilder som anpassar sig efter besökarens skärmstorlek, och de är viktiga eftersom de kan förbättra både laddningstider och konverteringar.

Bildkvalitet är viktig för att hålla konverteringsgraden uppe, men bildoptimering är minst lika central för användarupplevelsen och sökmotoroptimeringen i din webbutik. När du lär dig att optimera bilder kan det ge stora effekter, från att stärka varumärket till att locka kunder som söker via Google Bilder.

Vad är bildoptimering?

Bildoptimering innebär att se till att dina bilder ser bra ut på både dator och mobil utan att försämra webbplatsens prestanda. Det handlar om att anpassa bildformat, storlek och upplösning efter den aktuella enheten, samtidigt som kvaliteten bevaras.

Tre huvudsakliga delar spelar in här:

1. Bildfilformat
2. Bildmått (höjd och bredd)
3. Skärmupplösning

Varför ska du optimera bilder?

Bilder är en viktig del av en bra köpupplevelse online. Kunder köper inte dina produkter om de inte kan se dem ordentligt. Data från HTTP Archive visar att dåligt optimerade bilder i genomsnitt står för nästan 38 % av en webbsidas filstorlek (vilket även kan kallas vikt) på en smarttelefon.

Bildoptimering minskar sidans vikt och är en grundläggande del av bra webbdesign för e-handel, vilket ger flera fördelar:

Balans mellan hastighet och kvalitet

Bildoptimering för webb och mobil existerar för att balansera hastighet och kvalitet. Inom e-handel är det viktigt att visa bilder som ser bra ut. Det ger en bättre upplevelse för den som surfar runt i butiken.

Google har uttalat sig om att webbplatshastighet är en av signalerna som används i algoritmen för att ranka sidor. En långsam sida innebär att sökmotorer hinner genomsöka färre sidor inom sin genomsökningsbudget, vilket kan påverka indexeringen negativt.

Bättre synlighet i sök

Optimerade bilder hjälper både läsare och sökmotorer att förstå din webbplats bättre och gör det lättare för ditt innehåll att synas online. Nya data visar att bilder visas för 36,7 % av sökningarna på Google.

Bildoptimering kan hjälpa dina bilder att ranka högre i Googles bildsök, vilket kan generera mer trafik till din webbplats och bidra till att bygga upp ditt varumärke.

Så optimerar du bilder för webben

1. Använd korta och tydliga bildnamn

Det är väldigt enkelt att ladda upp bilder till webbplatsen och behålla standardnamnen som kameran tilldelar. Men när det gäller bild-SEO är det viktigt att använda relevanta sökord som hjälper sidan att ranka i sökmotorer.

Beskrivande filnamn med relevanta sökord är avgörande för bildoptimering. Sökmotorer genomsöker inte bara texten på sidan, utan även filnamnen på dina bilder.

Vi kan ta den här bilden som exempel:

Du skulle kunna använda det generiska namn som kameran gav bilden, till exempel DCMIMAGE10.jpg. Men det är betydligt bättre att döpa filen till 2012-Ford-Mustang-LX-Red.jpg.

Tänk på hur dina kunder söker efter produkter på din webbplats. Vilka namnmönster använder de när de söker? I exemplet ovan kan bilköpare söka på uttryck som:

• 2012 Red Ford Mustang LX
• Ford Mustang LX Red 2012
• Red Ford Mustang LX 2012

Titta i din webbplatsanalys för att se vilka sökord kunderna använder för att hitta dig. Identifiera de vanligaste namnmönstren och använd samma logik när du namnger dina bildfiler.

Om du inte vill gå så långt i analysen behöver du åtminstone se till att använda relevanta och hjälpsamma sökord när du namnger dina bilder, alltså att vara tydlig och beskrivande.

Att namnge bildfilerna på sin webbplats är strategiskt och värt att lägga tid på eftersom det definitivt kan förbättra SEO på sidan. Det kan också hjälpa både webbsidor och bilder att ranka högre på sökmotorernas resultatsidor.

2. Skapa genomtänkta alt-texter

Alt-texter, eller alt-attribut, är textalternativ till bilder när en webbläsare inte kan visa dem korrekt. De används också för ökad tillgänglighet på webben. Även när bilden visas kan du, beroende på webbläsarens inställningar, se alt-texten när du håller muspekaren över den.

Alt-texter tillför också SEO-värde till din webbplats. Om du lägger till relevanta alt-attribut med passande sökord på bilderna kan det hjälpa dig att ranka bättre i sökmotorer. Det är möjligt att alt-texter är det bästa sättet för dina e-handelsprodukter att synas i Googles bildsök och vanliga sökresultat.

Låt oss titta på källkoden för ett alt-attribut.

Den viktigaste prioriteringen inom bildoptimering är att fylla i alt-text för varje produktbild på webbplatsen.

Här är några enkla regler för alt-text:

• Beskriv bilderna med enkelt språk, på samma sätt som du gjorde med filnamnen.
• Om du säljer produkter med modellnummer eller serienummer, använd dem i alt-attributen.
• Fyll inte alt-attributen med sökord i överkant, till exempel alt="ford mustang muskelbil köp nu billigt bästa pris rea".
• Använd inte alt-attribut för dekorativa bilder. Överdriven optimering kan leda till att sökmotorerna nedvärderar din webbplats.

Ta för vana att göra en rimlighetskontroll då och då. Visa sidans källkod och kontrollera att alt-textena finns där och fortfarande är relevanta. Det är förvånansvärt lätt att missa sådant när tempot är högt.

3. Välj bildmått och produktvinklar med omsorg

Det är vanligt att visa en produkt från flera vinklar. Om vi återgår till exemplet med Ford Mustang skulle du knappast vilja visa bara en enda bild av bilen, särskilt om målet är att sälja den. Det är klokare att också visa bilder på:

• Interiören
• Bakpartiet
• Fälgarna
• Motorn, det är trots allt en Mustang

Det bästa sättet att få ut mer av de här extra bilderna är att fylla i alt-attributen. Det gör du genom att skapa unika alt-attribut för varje produktbild:

• 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> använd alt-attributet: alt="2012 Ford Mustang LX Red Leather Interior Trim"
• 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> använd alt-attributet: alt="2012 Ford Mustang LX Red Rear View Air Spoiler"

Poängen här är att bygga vidare på ditt grundläggande alt-attribut med beskrivningar som gör att potentiella sökare hittar till din webbplats.

4. Anpassa storleken på dina bilder

Du behöver hantera bilderna på webbplatsen så att de ser bra ut på alla enheter, särskilt på mobil och skärmar med hög upplösning.

För att fungera bra på skärmar med hög pixeltäthet där fler pixlar ryms på samma fysiska yta än på traditionella skärmar behöver du minst en bild i 2x-storlek för att den ska se skarp ut och inte grynig. Om din webbplats till exempel har en bildyta på 200 x 200 pixlar behöver du en bild på 400 x 400 pixlar för att behålla skärpan på en högupplöst skärm. Nästan alla mobiltelefoner har i dag en skärmupplösning på 2x eller högre.

Det enklaste sättet att lösa detta är att använda ett så kallat content delivery network, eller CDN. Ett CDN tar hand om arbetet med att ändra storlek på bilder och leverera det bästa bildformatet för användarens enhet. Det förbättrar också själva laddningstiden för bildfilen, eftersom innehållet levereras från servrar närmare slutanvändaren.

Obs! 💡 Shopifys bild-CDN är tillgängligt för dig som Shopifyprenumerant och använder då ditt Shopify-tema. För att se hur det fungerar kan du ladda upp en egen bild och testa Shopifys CDN i den engelskspråkiga versionen som finns tillgänglig.

5. Välj rätt bildformat

Rätt bildformat är väldigt viktigt för din webbplats. Vissa filformat håller högre kvalitet än andra. Vissa tar också mer plats, och det påverkar sidans laddningstid.

Det finns i grunden två huvudtyper av bildformat: rasterbilder och vektorbilder.

Vektorbilder bygger på matematiska formler. När du behöver grafik som kan skalas till olika storlekar utan att tappa kvalitet ska du använda vektorgrafik. Den vanligaste vektorbilden är SVG, Scalable Vector Graphics. Det är ett idealiskt val för logotyper, ikoner och annan enkel grafik där du behöver tydlighet och skärpa oavsett storlek.

Rasterbilder består av pixlar som kan skapa mycket detaljrika bilder, till exempel fotografier. Ju fler pixlar en bild innehåller, desto större och mer högupplöst blir den.

Med tiden har nyare och bättre codecs (tekniker för att koda och komprimera digitalt innehåll) utvecklats för rasterbilder. GIF var till exempel en tidig bildcodec för webben, men kvaliteten var låg eftersom komprimeringstekniken slog samman närliggande pixlar. Nyare tekniker kodar och komprimerar på sätt som är svårare för det mänskliga ögat att upptäcka.

Det innebär att vi kan leverera bilder med högre kvalitet och mindre filstorlek när vi använder modernare bildformat. Följande format är vanligast på webben i dag:

• JPG: Ett mycket vanligt bildformat för fotografier. Det använder förstörande komprimering för att minska filstorleken, men offrar en del kvalitet.
• PNG: Ett populärt format bland webbdesigners eftersom det hanterar grafik med transparent bakgrund. Filtypen behåller all ursprunglig data vid komprimering, vilket gör den bra för grafik och diagram på en webbplats.
• WEBP: Ett modernt format byggt för webben. Det stöder både komprimering med kvalitetsförlust och förlustfri komprimering, och ger mindre filer än JPG och PNG, samtidigt som kvaliteten är likvärdig eller bättre.
• AVIF: Det nyaste bildformatet, AVIF komprimerar bilder effektivt med mindre kvalitetsförlust.

Alla webbläsare stöder inte alla format. Här blir ett bild-CDN användbart igen, eftersom det automatiskt kan välja det bästa formatet för en viss webbläsare och konvertera originalbilden. Om du inte använder ett CDN med den funktionen behöver du använda <picture>-taggen i din HTML.

Obs! 💡 Shopifys CDN känner automatiskt av vilka filformat som stöds av webbläsaren och skickar det bästa alternativet. Det kan till exempel konvertera bilder till WebP eller AVIF där det stöds, och skicka PNG- eller JPEG-bilder som reserv för äldre webbläsare.

6. Använd bildsitemaps

Om din webbplats använder JavaScript-gallerier, bildpopuper eller andra ”flashiga” lösningar för att förbättra köpupplevelsen hjälper en bildsitemap Google att upptäcka dina bilder.

Sökrobotar kan inte genomsöka bilder som inte uttryckligen finns med i sidans källkod. För att tala om för crawlare var sådana bilder finns behöver du därför lista deras plats i en bildsite.

Du kan lägga in följande rad i din robots.txt-fil för att visa sökvägen till webbplatskartan:

Sitemap: http://example.com/sitemap_location.xml

Du kan också skicka in webbplatskartan till Google via Search Console. Google har många riktlinjer för publicering av bilder som kan hjälpa din webbplats att ranka högre i sökresultaten. Dessutom kan du använda Googles webbplatskartor för att ge Google mer information om bilderna på din webbplats, vilket kan hjälpa Google att hitta fler av dem än annars.

Som Shopify-handlare får du automatiskt en genererad webbplatskarta som inkluderar dina produktbilder. Det innebär att bilder på produktsidorna och andra viktiga bilder i bloggen eller kollektionerna blir upptäckbara för sökmotorer via webbplatskartan. Det ökar chansen att bilderna visas i sökresultat och driver mer trafik till webbplatsen.

Shopify uppdaterar webbplatskartan automatiskt när nya sidor eller produkter läggs till, eller när befintliga tas bort. Du behöver alltså aldrig skapa eller uppdatera den manuellt.

7. Använd ett bra CDN för bilder

Specialiserade bild-CDN:er erbjuder funktioner för bildbearbetning, så att du bara behöver ladda upp en bild av hög kvalitet. Därefter ändrar de storlek, format och cachelagring utifrån varje enskild förfrågan. Med Shopifys bild-CDN optimeras filstorleken automatiskt när du laddar upp en bild. Förändringen i kvalitet är inte märkbar för ögat, men den förbättrar sidans laddningstid. CDN:et känner också automatiskt av vilka filformat som stöds på klientsidan och erbjuder dynamisk redigering, vilket gör att du kan beskära och bearbeta bilden utan att förlora originalfilen.

8. Testa dina bilder

Hela poängen med att optimera bilder är att förbättra resultatet på sista raden. Vi har pratat om att minska filstorlekar och få sökmotorer att indexera bilderna, men hur är det med att testa vilka bilder som faktiskt får fler kunder att konvertera?

• Testa antalet produktbilder per sida. Eftersom laddningstid kan vara ett problem för vissa e-handelswebbplatser utan hostad lösning kan du upptäcka att färre bilder på en sida ökar klickfrekvensen och försäljningen. Det är också möjligt att många bilder per sida förbättrar användarupplevelsen och leder till fler köp. Det enda sättet att veta säkert är att testa.
• Testa vilka vinklar kunderna föredrar. Du kan se ökad kundlojalitet om du visar de vyer kunderna faktiskt vill se. Ett bra sätt att ta reda på det är att fråga kunderna vad de uppskattade mest när de tittade på produktbilderna. Att undersöka och prata med kunder är överlag en god vana. Men se alltid till att bekräfta med tester.
• Testa hur många produkter du bör visa på kategorisidor. Är det 10, 20 eller 100 produkter? Testa hur många produkter du listar på kategorisidorna för att se vad som fungerar bäst för dina kunder.

Verktyg för bildoptimering

När du nu känner till några av de viktigaste metoderna för bildoptimering kan vi titta på några verktyg och plugins som du kan använda på din webbplats.

Observera att om du använder Shopify eller ett specialiserat bild-CDN behöver du inte använda dessa verktyg. Det enda undantaget är SVGOMG, eftersom de flesta bild-CDN:er inte erbjuder optimering för SVG-filer.

Squoosh

Squoosh är en lättanvänd webbaserad app för bildkomprimering. Dra bara in din bild i verktyget och välj bland optimerade bildformat som JPEG XL, WEBP, PNG och flera andra.

TinyPNG

TinyPNG är ett annat populärt verktyg för bildoptimering på webben. Det använder smart förstörande komprimering för att minska filstorleken för WEBP-, JPEG- och PNG-filer på din webbsida.

Du kan minska storleken på bilder för appar eller butik, och även komprimera animerade bilder. Verktyget fokuserar inte bara på bildkomprimering utan erbjuder också API-integration och utvecklarverktyg för att integrera TinyPNG i anpassade mjukvarulösningar.

TinyPNGs API ändrar automatiskt storleken på bilder för miniatyrer, tar bort onödiga delar och lägger till mer bakgrund. Om du driver din webbplats på WordPress finns det som plugin.

SVGOMG

SVGOMG är ett annat enkelt verktyg för bildoptimering. Det ger flera alternativ för att rensa upp och minifiera dina SVG-filer. Ladda bara upp eller kopiera källkoden för din SVG för att komma igång. Du kan justera de olika reglagen och skapa en identisk bild, men med en mindre filstorlek än originalet.

Behåll bildernas funktion med bildoptimering

Att optimera dina bilder är avgörande för att driva en framgångsrik verksamhet online. Det förbättrar inte bara hur produkterna ser ut, utan bidrar också till en smidig köpupplevelse och gör det lättare att bli hittad på nätet.

En e-handelsplattform som Shopify levererar automatiskt dina bilder i bästa möjliga format till besökaren, så att du kan öka försäljningen och få verksamheten att växa online.