Storleken på WooCommerce-produktbilder är en av de mest förbisedda inställningarna i alla webbutiker. De flesta butiksägare laddar upp den storlek som kommer från deras kamera, ställer in WooCommerce som standard och går vidare.
Sedan undrar de varför produktbilder ser suddiga ut på vissa sidor, varför deras Core Web Vitals -poäng inte sjunker, eller varför mobilkunder hoppar av innan produkten ens laddas.
På Seahawk Media arbetar vi med WooCommerce-butiker inom alla branscher. Samma mönster dyker upp ständigt. Problemet med bildstorlek ignoreras antingen helt eller hanteras inkonsekvent i en produktkatalog.
Båda kostar försäljning. Om du vill se hur välbyggda, högpresterande e-handelswebbplatser drivna av WordPress och WooCommerce ser ut i praktiken, visar vår portfölj verkliga exempel från flera branscher.
Den här guiden täcker de exakta dimensionerna som fungerar år 2026, hur WooCommerce faktiskt hanterar bildstorlekar, vad som ska laddas upp, hur man formaterar bilder och de verktyg som automatiskt optimerar bilder så att du kan fokusera på att sälja.
TL;DR: WooCommerce-produktbildstorlek
- Den bästa WooCommerce-produktbildstorleken för de flesta butiker är 800 x 800 pixlar för enskilda produktsidor och 600 x 600 pixlar för katalogrutnät.
- Ladda upp källbilder med minst 1200 x 1200 pixlar så att WooCommerce kan generera alla storlekar utan kvalitetsförlust.
- WooCommerce skapar automatiskt tre bildstorlekar: enskild produktbild, katalogminiatyrbild och galleriminiatyrbild.
- Använd WebP-format år 2026. Det är 25–35 % mindre än JPEG med samma visuella kvalitet och har 97 % webbläsarstöd.
- Använd alltid ShortPixel för att komprimera bilder och generera miniatyrbilder efter att du har ändrat storleksinställningarna.
- Fel bildstorlekar orsakar suddiga bilder, långsamma laddningstider, misslyckade Core Web Vitals och förlorad försäljning.
Hur hanterar WooCommerce bildstorlekar?
Innan du väljer några dimensioner är det bra att förstå hur WooCommerce faktiskt använder din uppladdade bild. WooCommerce registrerar tre bildstorlekar och genererar dem automatiskt från din källfil när du laddar upp.
Här är vad var och en är till för och vad den är som standard:
| Bildstorlek | Standarddimensioner | Var det används |
|---|---|---|
| Bild på en enda produkt (woocommerce_single) | 600px bredd, obeskuren | Huvudbild på enskilda produktsidor |
| Katalogminiatyr (woocommerce_thumbnail) | 300px bredd, beskuren kvadrat | Rutnät för butikssida, kategorisidor, sökresultat |
| Galleriminiatyr (woocommerce_gallery_thumbnail) | 100 x 100px, beskuren kvadrat | Små bilder under huvudproduktbilden för navigering i galleriet |
Det viktiga att förstå här är att dessa standardinställningar är konservativa. En 300px katalogminiatyrbild ser acceptabel ut på ett skrivbordsrutnät, men ser märkbart mjuk ut på moderna Retina-skärmar. En 600px bild av en enda produkt lämnar inget utrymme för högkvalitativ zoomfunktionalitet. De flesta butiker behöver justera dessa inställningar från dag ett.
Förlorar din WooCommerce-butik försäljning på grund av långsamma bilder?
Vi granskar och optimerar WooCommerce-butiker för bildprestanda, Core Web Vitals och förbättring av konverteringsfrekvens.
Rekommenderade WooCommerce-produktbildstorlekar för 2026
Kort sagt: Ladda upp källbilder på 1200 x 1200 pixlar eller större. Ställ in din enskilda produktbild på 800 pixlar bredd och din katalogminiatyrbild på 600 pixlar bredd.
Här är den rekommenderade storleksinställningen som balanserar visuell kvalitet, sidhastighetoch konverteringsprestanda för de flesta butiker:
| Bildtyp | Rekommenderad storlek | Anteckningar |
|---|---|---|
| Källuppladdning (original) | Minst 1200 x 1200 pixlar | Ger WooCommerce tillräckligt med upplösning för att generera alla storlekar utan kvalitetsförlust |
| Bild på en enda produktsida | 800 x 800 pixlar | Skarp, zoomklar, fungerar med alla moderna teman |
| Katalogminiatyr | 600 x 600 pixlar | Rena rutnät på dator och mobil, retina-säkert |
| Galleriminiatyr | 150 x 150 pixlar | Synligt och tydligt för gallerinavigering |
Det kvadratiska bildförhållandet fungerar bäst för de flesta butiker eftersom WooCommerce-rutnät är byggda kring konsekventa produktkort. Ett konsekvent 1:1-förhållande i hela din katalog skapar en professionell och sammanhängande layout som bygger upp kundernas förtroende.
Om ditt tema använder ett icke-kvadratiskt format (t.ex. stående eller liggande layouter), matcha måtten med temats specifikationer och håll det förhållandet konsekvent över alla produkter.
WooCommerce-bildstorlekar efter produkttyp
De rekommenderade storlekarna ovan fungerar bra för vanliga butiker. Bildkraven varierar dock avsevärt beroende på vad du säljer. Här är en praktisk uppdelning per produktkategori.
- Kläder och kläder: Bilder mellan 800 och 1000 pixlar breda ger tillräckligt med detaljer för att visa tygstruktur, sömmar och passform utan att skapa onödigt stora filer. Håll ett konsekvent bildförhållande över alla klädesbilder för att hålla rutnätet enhetligt.
- Smycken: Detaljerade närbilder är avgörande. Hantverket av ädelstenar, gravyrer och fint metallarbete kräver högre upplösning. Använd bilder mellan 1000 och 1500 pixlar breda och se till att ditt tema stöder zoom så att kunderna kan granska detaljerna.
- Elektronik: Tekniska detaljer är viktiga för produkter som bärbara datorer, smartphones och kameror. Kunder behöver läsa etiketter, se portar och inspektera komponenter. Använd bilder upp till 1200–1400 pixlar breda för att bibehålla skärpan på alla skärmtyper.
- Möbler och heminredning: Dessa produkter använder livsstilsbilder som visar skala, textur och placering i ett rum. Bilder mellan 1200 och 1600 pixlar fungerar bra. Porträtt- och liggande formatförhållanden är vanliga i den här kategorin, så matcha ditt temas layout snarare än att tvinga fram en fyrkantig beskärning.
- Digitala produkter och programvara: Mindre bilder fungerar bra här. Rena skärmdumpar och mockups på 800 x 800 pixlar är mer än tillräckligt.
Hur ändrar man bildstorlekar i WooCommerce?
Att ändra bildstorlekar i WooCommerce tar mindre än fem minuter. Det viktiga är att veta vad man ska ändra och vad man ska göra efter att man har ändrat det.
Steg 1: Gå till Utseende ⟶ Anpassa i din WordPress-instrumentpanel.
Steg 2: Navigera till WooCommerce och sedan Produktbilder.
Steg 3: Justera miniatyrbildens beskärning och dimensioner. Du kommer att se en förhandsgranskning till höger som uppdateras när du gör ändringar. Klicka på Publicera för att spara dina ändringar.
Att ändra dessa inställningar i Customizer uppdaterar de dimensioner som WooCommerce använder framöver. Alla dina befintliga produktbilder kommer dock att fortsätta visas med sina ursprungliga dimensioner tills du genererar miniatyrbilder igen. Att hoppa över detta steg är ett av de vanligaste misstagen butiksägare gör efter att ha uppdaterat bildinställningar.
Steg 4: Installera pluginet Regenerate Thumbnails och kör det på hela ditt mediebibliotek. Detta omarbetar alla befintliga bilder till de nya dimensionerna. För stora kataloger körs detta i bakgrunden och kan ta några timmar, men kräver ingen ytterligare inmatning från dig.
Vilket bildformat ska man använda år 2026?
Kort sagt: Använd WebP som ditt primära bildformat. Det ger samma visuella kvalitet som JPEG med 25–35 % mindre filstorlekar och har 97 % globalt webbläsarstöd från och med 2026.
Diskussionen om bildformat har förändrats markant under de senaste två åren. Här är hur varje format står sig idag.
- WebP är rätt val för de flesta WooCommerce-produktbilder år 2026. Alla större webbläsare stöder det. Det hanterar fotografier, produktutklipp och transparenta bilder.
WebP med kvalitet 80 till 85 producerar filer som visuellt inte kan skiljas från JPEG med kvalitet 90 till 95, men med betydligt mindre filstorlekar. Om du inte redan använder WebP i din butik är detta den enskilt mest effektfulla bildändringen du kan göra i år.
- JPEG är fortfarande acceptabelt för produktfotografering om WebP-konvertering inte redan är konfigurerad, men det är inte längre det optimala valet. JPEG stöder inte transparens och är genomgående större än WebP vid motsvarande kvalitet.
- PNG bör endast användas när transparens verkligen behövs, till exempel produktbilder på färgad bakgrund eller bilder med textöverlägg. PNG-filer är betydligt större än WebP och JPEG för fotografier. Använd inte PNG för vanliga produktfoton.
- AVIF är nästa generations format efter WebP och producerar ännu mindre filer. Webbläsarstödet växer, men är ännu inte tillräckligt universellt för primär användning i en vanlig WooCommerce-butik. Det är värt att övervaka, men det är ännu inte standardrekommendationen för de flesta butiker.
Det enklaste sättet att konvertera hela ditt WooCommerce-mediebibliotek till WebP utan att manuellt exportera varje bild är att använda ShortPixel.
Den komprimerar bilder på sina servrar (utan att dina webbhotellsresurser påverkas), konverterar automatiskt till WebP och AVIF och levererar rätt format till varje webbläsare. Komprimeringsläget Glossy är rätt inställning för produktfotografering: det minskar filstorleken med 40–60 % utan synlig kvalitetsförlust.
Varför påverkar bildstorleken din Google-ranking?
Produktbildens storlek är inte bara en visuell fråga. Den påverkar direkt din butiks prestanda i Google Sök på två specifika sätt som de flesta butiksägare inte helt förstår.
Kärnvärden för webben och största innehållsrika målningar
Google mäter sidinläsningsupplevelsen med hjälp av dessa mätvärden. Mätvärdet Largest Contentful Paint, som mäter hur snabbt det synliga huvudinnehållet laddas, är nästan alltid den huvudsakliga produktbilden på en WooCommerce-produktsida.
En ooptimerad 3MB stor hero-bild orsakar pålitligt ett LCP-fel och minskar direkt dina sökrankningar. Att få dina produktbilder rätt är ett av de mest konkreta stegen du kan ta för att förbättra din WooCommerce-webbplats hastighet och SEO-prestanda.
Bildsökning och strukturerad data
År 2026 blir visuella sökverktyg, inklusive Google Lens och AI-driven sökning, allt viktigare för e-handelsupptäckt. Produktbilder inslagna i korrekt produkt- och ImageObject -schemamarkup är betydligt mer benägna att visas i avancerade bildresultat.
De flesta SEO-plugins, inklusive AIOSEO och Rank Math, hanterar detta automatiskt, men de måste peka på din bildvariant med högsta upplösning (800px eller större) snarare än en miniatyrbild. Verifiera detta i dina schemainställningar efter att du har ändrat bildens dimensioner.
Mobil prestanda
53 % av mobilanvändare lämnar sidor som tar mer än tre sekunder att ladda. Produktbilden är nästan alltid den viktigaste tillgången på en mobil produktsida. Optimerade bildstorlekar, WebP-formatet och lazy loading är kombinationen som håller mobilprestanda stark.
För en komplett överblick över hur bildprestanda passar in i den bredare bilden av optimering av e-handelswebbplatser, täcker vår fullständiga guide varje lager från bilder till kassan.
Vanliga WooCommerce-bildproblem och hur man åtgärdar dem
Här är några av de vanliga problemen, och så här åtgärdar du dem:
- Suddiga produktbilder: Orsakas nästan alltid av att bilder laddas upp som är mindre än dina konfigurerade WooCommerce-dimensioner. Om du ställer in bilder för enskilda produkter till 800px men laddar upp källfiler på 400px, sträcker WooCommerce ut bilden och kvaliteten försämras. Ladda alltid upp källbilder med minst 1200px. Kör pluginet Regenerate Thumbnails efter att du har korrigerat källbilderna.
- Inkonsekvent produktrutnätslayout: Orsakas av att bilder med olika bildförhållanden laddas upp i din katalog. En blandning av stående, liggande och fyrkantiga bilder skapar ett ojämnt produktrutnät som ser oprofessionellt ut och undergräver förtroendet. Standardisera alla produktbilder till samma bildförhållande innan uppladdning och ställ in WooCommerce för att använda hård beskärning för att säkerställa konsekvens.
- Bilderna ser bra ut på datorn men svaga på mobilen: Detta är oftast ett problem med retinaskärmen. Moderna telefoner använder högdensitetsskärmar som kräver bilder med dubbelt så stora pixeldimensioner som CSS för att se skarpa ut. Ställ in din katalogminiatyrbild på 600 pixlar istället för 300 pixlar för att säkerställa retinaskärmen på mobila enheter.
- Långsamma sidinläsningstider från produktbilder: Stora, okomprimerade filer är den vanligaste orsaken till långsamma WooCommerce-butiker. Installera ShortPixel, kör en massoptimering på ditt mediebibliotek och aktivera WebP-leverans. För butiker med stora kataloger ger denna enda ändring vanligtvis den största prestandaförbättringen av alla optimeringsuppgifter.
- Bilder uppdateras inte efter att storleksinställningarna har ändrats: Du har ändrat måtten i anpassaren, men bilderna visas fortfarande i sina gamla storlekar. Det betyder att miniatyrbilderna inte har genererats om. Kör pluginet Regenerate Thumbnails för att bearbeta om alla befintliga bilder till de nya måtten.
Rätt verktygsstack för WooCommerce-bildoptimering
Du behöver inte hantera bildstorlekar och komprimering manuellt. Rätt av WordPress-plugin för bildoptimering hanterar allt automatiskt från det ögonblick du laddar upp.
- ShortPixel hanterar bildkomprimering och WebP-konvertering. Använd Glossy-läget för produktfotografering. Den komprimerar bilder på serversidan, stöder massoptimering av befintliga bibliotek och levererar automatiskt WebP till webbläsare som stöds. För WooCommerce-butiker ShortPixel den bästa balansen mellan kvalitet, kostnad och automatisering.
- Regenerate Thumbnails är ett gratis plugin som du behöver när du ändrar bilddimensioner i WooCommerce. Installera det, kör det efter varje storleksändring, och resten hanteras i bakgrunden. Det är ett plugin som bara gör en uppgift och gör sitt jobb bra.
- MonsterInsights kopplar din butik till Google Analytics 4 och ger dig tydlig insikt i vilka produktsidor som har högst avvisningsfrekvens, vilket kan indikera problem med bildprestanda på specifika sidor.
Slutsats
Att få rätt storlek på WooCommerce-produktbilder är inte komplicerat, men det kräver avsiktliga beslut snarare än att förlita sig på standardinställningar.
- Ladda upp källbilder med en storlek på 1200 x 1200 pixlar eller större.
- Ställ in din enskilda produktbild på 800 pixlar och din katalogminiatyrbild på 600 pixlar. Använd WebP-format.
- Komprimera med ShortPixel i glansigt läge. Återskapa miniatyrbilder efter varje storleksändring. Matcha bildförhållandet konsekvent i hela din katalog.
Dessa steg förbättrar samtidigt den visuella kvaliteten, Core Web Vitals-poäng, mobilprestanda och sökresultat. För en e-handelsbutik där produktbilder är det primära verktyget för att övertyga en kund att köpa är detta inte valfritt underhåll. Det är grunden för en butik som konverterar.
Sammantaget omdöme: Standardinställningarna för WooCommerce-bilder fungerar som utgångspunkt men är inte optimerade för moderna Retina-skärmar, WebP-leverans eller Core Web Vitals. Att justera dimensioner, byta till WebP och komprimera med ShortPixel är den lägsta konfigurationen varje seriös WooCommerce-butik bör ha år 2026.
Vanliga frågor
Vilken är den bästa storleken på WooCommerce-produkters bilder?
Den bästa storleken för WooCommerce-produktbilder för de flesta butiker är 800 x 800 pixlar för enskilda produktsidor och 600 x 600 pixlar för katalogminiatyrer. Ladda upp källbilder med minst 1200 x 1200 pixlar så att WooCommerce kan generera alla nödvändiga storlekar utan kvalitetsförlust.
Vilket bildformat ska jag använda för WooCommerce-produkter år 2026?
WebP är det rekommenderade formatet för WooCommerce-produktbilder år 2026. Det är 25–35 % mindre än JPEG i motsvarande kvalitet och har 97 % globalt webbläsarstöd. Använd ShortPixel för att automatiskt konvertera ditt befintliga bildbibliotek till WebP utan att behöva ladda upp varje fil igen.
Varför är mina WooCommerce-produktbilder suddiga?
Suddiga WooCommerce-produktbilder orsakas nästan alltid av att källbilder laddas upp som är mindre än dina konfigurerade utdatamått. Om din enskilda produktbild är inställd på 800px men din källfil är 400px, sträcker WooCommerce ut bilden, vilket resulterar i försämrad kvalitet. Ladda upp större källfiler (minst 1200px) och kör pluginet Regenerate Thumbnails.
Hur ändrar jag storleken på WooCommerce-produktens bild?
Gå till Utseende, sedan Anpassa, sedan WooCommerce och sedan Produktbilder. Justera miniatyrbildens beskärning och dimensioner och klicka på Publicera. Efter att du har sparat, kör pluginet Regenerate Thumbnails för att bearbeta om alla befintliga bilder till de nya dimensionerna. Ändringarna gäller endast nya uppladdningar; annars.
Påverkar WooCommerce-bildstorlekar SEO?
Ja, avsevärt. Stora, ooptimerade bilder orsakar störningar i "Largest Contentful Paint", vilket är en direkt faktor för Googles ranking. Optimerade bilder förbättrar Core Web Vitals, minskar avvisningsfrekvensen för mobila enheter och gör dina produktbilder kvalificerade för Googles Rich Image-resultat när de kombineras med korrekt produktschemamarkup.
Vilken är WooCommerce-miniatyrstorleken?
WooCommerce ställer in katalogminiatyren till 300 pixlar bredd som standard. Detta är för litet för moderna Retina-skärmar. Den rekommenderade storleken för katalogminiatyrer för de flesta butiker är 600 x 600 pixlar, vilket ger skarpa bilder på både standard- och högdensitetsskärmar.
Hur genererar jag miniatyrbilder i WooCommerce?
Installera det kostnadsfria pluginet Regenerate Thumbnails från WordPress plugin-katalog. När du har ändrat dina bilddimensioner i WooCommerce Customizer, gå till Verktyg ⟶ Regenerate Thumbnails och kör sedan processen på hela ditt mediebibliotek. Det körs i bakgrunden och bearbetar automatiskt alla befintliga bilder till de nya dimensionerna.
Ska jag använda JPEG eller WebP för WooCommerce-bilder?
Använd WebP. Det ger samma visuella kvalitet som JPEG med 25–35 % mindre filstorlekar, stöder transparens (ersätter PNG för produktutklipp) och stöds fullt ut i alla större webbläsare från och med 2026. ShortPixel konverterar automatiskt ditt befintliga JPEG-bibliotek till WebP, utan att varje bild behöver exporteras manuellt.
