Optimera produktbilder för din webbutik

Börja med den produktinformation som kunder behöver

En produktbild har ett jobb utöver att fylla en rektangel. Den ska hjälpa någon att bedöma formen, finishen, färgen och funktionerna hos det de köper. En export som tar bort stygn, gör bokstäver svårlästa eller ändrar utseendet på en yta är för aggressivt komprimerad, även om filstorleken ser imponerande ut.

Välj en liten uppsättning användbara vyer innan du redigerar. Ett tydligt huvudfoto, en annan vinkel och en närbild av en viktig funktion besvarar vanligtvis fler frågor än flera nästan identiska bilder. Lägg till en livsstilsvy eller en skalreferens när det hjälper till att förklara produkten. Det finns inget obligatoriskt antal: en vanlig mugg och en teknisk jacka behöver olika information.

Förvara dina originalfotografier i en separat mapp. Förbered kopior för publicering med namn som identifierar produkten och vyn. Om originalbilden är oskarp, dåligt belyst eller för liten, kommer komprimering inte att reparera det. Byt ut det svaga fotografiet innan du lägger tid på exportinställningar.

Gör beskärningar och bakgrunder konsekventa

Öppna en samlingssida och titta på flera produkter tillsammans. Olika mängder tomt utrymme kan få liknande produkter att se orelaterade ut eller märkbart olika i storlek. Välj ett bildförhållande som passar ditt tema och håll sedan motivets position och det omgivande utrymmet någorlunda konsekvent över huvudbilderna.

En fyrkantig beskärning kan fungera bra för ett fyrkantigt produktrutnät, men det är inte en universell regel. Ett högt plagg eller en lång utrustningsdel kan behöva en annan presentation. Kontrollera hela objektet, inklusive handtag och tillbehör, innan du accepterar en beskärning. Sträck inte ut ett fotografi för att få det att passa en mall.

Använd Pixilos verktyg för produktbilder för att förbereda en hel serie. Välj gemensamma bildmått, minsta marginaler och bakgrund. Beskär och placera sedan varje foto för sig. Granska serien under Alla bilder innan du laddar ned den. Med Förstora kan du kontrollera detaljer och hur kvalitetsinställningen påverkar resultatet.

Minsta marginalen räknas från den beskurna bildens kanter, inte från en automatiskt identifierad produkt. Tom yta och täckande bakgrunder i originalet finns kvar om du inte beskär bort dem. Samma bildyta gör därför inte automatiskt att alla produkter ser lika stora ut. Kontrollera även det publicerade produktrutnätet eftersom butikens tema kan beskära bilderna igen.

En vit eller neutral bakgrund kan ge katalogen ett enhetligt uttryck. Transparens kan passa om produkterna ska visas mot olika bakgrunder. Om en PNG- eller WebP-bild redan har genomskinliga områden kan verktyget för bakgrundsfärg kan fylla dem med en vald färg och skapa en JPG. Den tar inte bort en befintlig bakgrund från ett vanligt fotografi.

Kontrollera genomskinliga kanter mot både ljusa och mörka ytor. En blek kontur som försvinner på vitt kan bli tydlig på en mörk sida. Om konturen redan är en del av originalbilden kommer en ändring av filformatet inte att ta bort den. Se guide till oväntade bakgrunder i transparenta bilder för att diagnostisera skillnaden.

Välj dimensioner för rutnätet, produktsidan och zoomen

Mät hur bred bilden faktiskt visas i din layout. Ett kollektionskort kan uppta 360 CSS-pixlar, medan huvudproduktbilden kan uppta 800. Dessa är visningsbredder, inte automatiska krav för den uppladdade filen.

En CSS-pixel mäter den synliga storleken i sidans layout. På en skärm med hög pixeltäthet kan den använda flera fysiska skärmpixlar. En skarp bild kan därför behöva fler bildpixlar än den visade bredden.

För en skärm med hög densitet är en version med ungefär dubbelt så stor bredd som visas en bra kandidat att testa. Ett 360-pixelskort skulle därför kunna använda en 720-pixel export, medan en produktbild med 800 pixlar skulle kunna använda en 1600-pixel export. Ha även mindre versioner tillgängliga. Dessa siffror är planeringsexempel, inte plattformsrekommendationer eller garantier om vilken fil en webbläsare kommer att välja.

Planera zoomvisningen separat. Om kunder behöver undersöka en tygväv, ett beslag eller en gravyr, behåll en tillräckligt detaljerad originalbild eller ge en separat närbild. En liten bildversion för produktlistan bör inte bli den enda filen som är tillgänglig för zoomvisaren. Omvänt bör rutnätet inte få varje besökare att ladda ner en zoombild i full upplösning.

Din plattform kan generera dessa varianter automatiskt. Om du kontrollerar leveransen själv, använd responsiva bilder så att webbläsaren kan begära en lämplig version. Guiden till responsiva bilder förklarar hur dimensioner, srcset och sizes passar ihop. Att bara få en stor bild att se mindre ut med CSS skapar inte en mindre nedladdningsbar fil.

Ett verkligt exempel: beskär ett produktfoto för ett kvadratiskt produktkort

Det här fotot är 1920 × 1076 pixlar. Burken tar upp en liten del av den breda bilden. För ett kvadratiskt produktkort kan vi beskära tätare utan att förvränga produkten eller ta bort den fotograferade bakgrunden.

1. Välj beskärningen. Behåll hela locket och burkens botten inom en beskärning på 630 × 630 pixlar i verktyget för produktbilder. Sockeln får fortsätta utanför bilden, men själva produkten bör synas helt.
2. Ange slutmåtten. Använd en bildyta på 600 × 600 pixlar och 0 % marginal. Låt förstoring vara avstängd: den beskurna källan är något större än resultatet och kan förminskas utan att lägga till pixlar.
3. Exportera och granska. Vi laddade ned en JPG med kvalitet 90 på 16,4 kB. Kontrollera lockets kant, den svaga skuggan och den jämna vita ytan innan du godkänner bilden.

Kvadraten på 600 pixlar visar ett exempel för ett produktkort och är ingen allmän rekommendation för uppladdning. Ett större galleri eller en zoomvy kan behöva fler pixlar. Den mindre filen beror på beskärning, storleksändring och JPG-export tillsammans; det är inget mått på enbart komprimeringen. Den ursprungliga bakgrunden och en del av sockeln finns kvar.

Välj ett format som passar bilden och stöds av ditt publiceringssystem

Separera formatet du laddar upp från formatet besökarna får. Din butik kan acceptera en originalbild i JPG- eller PNG-format och leverera WebP- eller AVIF-format automatiskt. I så fall kan det öka arbetet utan att förbättra resultatet om du själv förbereder flera uppladdningar i modernt format.

• JPG: en praktisk utgångspunkt för fotografier med ogenomskinlig bakgrund, särskilt när din plattform eller annan destination kräver JPEG. Kontrollera små bokstäver och fin textur efter komprimering.
• PNG: passar när du behöver transparens eller vill behålla skarp grafik utan en ny komprimering med förlust. En stor PNG med ett fotografi kan däremot vara betydligt tyngre än ett lämpligt alternativ.
• WebP: värd att jämföra för foton och transparent produktgrafik när din publiceringskonfiguration accepterar det. Formatet stöder olika komprimeringslägen, men Pixilos PNG/JPG-till-WebP-konverterare använder en kvalitetsinställning snarare än ett dedikerat förlustfritt läge.
• AVIF: en annan kandidat när hela ditt publiceringsarbetsflöde stöder det. Testa den exporterade bilden och den publicerade sidan; en mindre fil ensam fastställer inte att bilden ser lämplig ut.

Använd guiden för webbplatsbildformat för en bredare jämförelse. Innan du ersätter en hel katalog, prova ett vanligt fotografi och en svår bild, till exempel ett fint mönster eller en genomskinlig utklippning. Kontrollera att uppladdningar, miniatyrbilder, gallerier och zoomning fungerar.

Ange ett användbart mål för filstorlek utan att offra detaljer

Det finns ingen enda korrekt filstorlek för varje produktfotografi. Ett enkelt objekt på en slät bakgrund och ett detaljerat vävt plagg kan behöva olika inställningar med samma dimensioner. En samlingssida med många bilder har också andra laddningskrav än ett galleri som visar en stor bild.

För en bild som du avser att visa direkt kan du testa en 200 KB-kandidat som en initial budget och sedan avgöra om den är användbar. Det är ett exempel, inte ett krav. Om etiketterna eller materialdetaljerna blir oklara kan du prova en mindre aggressiv inställning, ett mer effektivt format eller en annan visningsstorlek. Fortsätt inte att sänka kvaliteten bara för att uppnå ett godtycklig siffra.

Jämför med den storlek som kunder normalt ser och inspektera sedan de viktiga områdena i full storlek eller i zoomvisaren. Leta efter trasiga bokstavskanter, block i skuggor, utsmetad textur och ojämna övergångar på släta bakgrunder. Det bästa valet är den minsta acceptabla versionen för den placeringen, snarare än den minsta export som ditt verktyg kan producera.

För ett separat komprimeringstest gick vi tillbaka till det obeskurna originalet och exporterade JPG med kvalitet 20, med alla 1920 × 1076 pixlar kvar. Resultatet är 28,0 kB, ungefär 62 % mindre än originalet. Jämför lockets kant, väggen och den mjuka skuggan med reglaget och Granska detalj. Kvalitet 20 är en avsiktligt låg testinställning, ingen rekommenderad standard. Granska även bilden i den storlek den ska visas.

Ursprunglig JPGJPG · Kvalitet 20

Om ett uppladdningsformulär har en verklig gräns, använd Komprimera till en filstorlek. Behåll måtten oförändrade initialt och tillåt proportionell storleksändring endast om det är lämpligt för bildens roll. En strikt gräns kan tvinga fram synliga kompromisser; ibland är en ny beskärning eller ett separat detaljfotografi mer användbart än ytterligare komprimering.

Undvik att exportera upprepade gånger från den senast komprimerade kopian. Återgå till originalet när du försöker med en annan kvalitetsinställning. Kvalitetstal är inte utbytbara mellan format eller kodare, så en JPG på 80 och en AVIF på 80 skulle inte automatiskt ha samma utseende.

Kontrollera vad Shopify, WordPress eller din butik redan hanterar

Shopifys dokumentation för bilduppladdning beskriver automatisk optimering av butiksfronten och rekommenderar högkvalitativa uppladdningar snarare än obligatorisk manuell förkomprimering. Dess levererade format kan skilja sig från det uppladdade formatet. Kontrollera kraven för just din produktmedia och ditt tema; det finns ingen anledning att införa en liten budget för leveransfiler på varje originalbilduppladdning.

För en WordPress-butik, granska bildstorlekarna som ditt tema genererar och eventuella optimerings-plugins eller bildtjänster som används. Kontrollera om produktkortet, produktgalleriet och zoomen får rätt versioner. Guiden till bildoptimering i WordPress beskriver arbetsgången mer ingående.

Om du ersätter en bild, öppna en ny sida och bekräfta att den nya versionen visas. Cachade miniatyrbilder eller genererade varianter kan få en gammal export att se ut som det nya resultatet. Att lägga till ytterligare ett komprimerings-plugin innan du kontrollerar den aktuella pipelinen kan skapa mer förvirring snarare än att lösa problemet.

Pixilo behandlar enskilda filer lokalt i din webbläsare. Det ansluter inte till butiken, uppdaterar inte katalogen och ställer inte in hur bilderna levereras. Verktygen JPG till WebP, PNG till WebP, WebP till JPG och PNG till JPG minskar bilder vars bredd eller höjd överstiger 4000 pixlar med bibehållna proportioner. Verktyget för bildstorlek stöder upp till 8000 pixlar per sida och totalt 32 miljoner pixlar. Kontrollera nedladdningens mått när du förbereder en stor bild för zoomvisningen.

Hjälp sökmotorer att förstå produktbilderna

Beskriv vyn korrekt. Ett filnamn som blue-ceramic-mug-side-view.jpg är lättare att hantera än IMG_4837.jpg. För alternativ text, skriv en användbar beskrivning av vad bilden visar, till exempel: "Blå keramisk mugg med ett böjt handtag, sedd från sidan." Ett annat fotografi bör beskriva sin egen vy snarare än att upprepa samma text.

Håll bilden nära relevant produktinformation och undvik att fylla filnamn eller alt-text med upprepade söktermer. Googles vägledning för bild-SEO förklarar beskrivande text och bildidentifiering. Dessa metoder hjälper till att kommunicera vad bilden representerar; de garanterar inte rankningar.

Kontrollera även produktsidan. En korrekt bild av den valda färgen eller varianten är mer användbar än en perfekt optimerad fil som visar fel vara. Bildoptimering bör stödja en korrekt lista, inte kompensera för saknad produktinformation.

Kontrollera det publicerade resultatet innan du ändrar hela katalogen

• Samlingsvy: Produkten är synlig, beskärningarna är konsekventa och rutnätet laddar inte ner onödigt stora filer.
• Produktgalleri: Huvudbilden är tydlig, ytterligare vinklar lägger till information och rätt produktvariant visas.
• Zoom: Viktiga etiketter, materialdetaljer och beslag förblir läsbara vid den avsedda förstoringen.
• Telefonlayout: En smal skärm beskär inte bort motivet eller tvingar in en stor skrivbordsbild i ett litet fack.
• Bakgrunder: Genomskinliga kanter och fyllningar ser korrekta ut mot de verkliga sidfärgerna.
• Laddar: Kontrollera filförfrågningar vid ett nytt besök. Undvik att försena den synliga huvudproduktbilden bara för att andra galleribilder kan laddas senare.
• Layout: Reservera korrekta bildproportioner så att text och knappar inte hoppar när fotografier visas.
• Källfiler: Spara originalen och en kort förteckning över de inställningar som användes för publicering.

Börja med en handfull representativa produkter, inklusive en bild med fina detaljer. Jämför före och efter under liknande förhållanden. När både utseende och leverans fungerar, tillämpa processen på resten av katalogen. För en djupare diagnos av laddningsproblem, läs varför webbplatsbilder laddas långsamt.

Vanliga frågor

Vilken är den bästa bildstorleken för en webbutik?

Det beror på temats visningsstorlekar och zoombeteende. Mät rutnätet och galleriet, behåll tillräckligt med originalbilddetaljer för förstoring och kontrollera de genererade filerna. Det finns ingen universell kvadratisk dimension som passar varje produkt eller plattform.

Bör varje produktbild vara under 200 KB?

Nej. Det kan vara en testbudget för vissa direkt visade bilder, men det är inte en universell uppladdningsregel. En originalbild för zoomvisningen kan behöva mer detaljer, och en automatiskt optimerande plattform kan fungera bättre med en högkvalitativ uppladdning.

Är JPG eller PNG bättre för produktfotografier?

JPG är en bra utgångspunkt för vanliga fotografier med ogenomskinlig bakgrund. PNG är bra för transparens och skarp grafik, men kan vara stor för foton. Kontrollera din plattforms flöde för uppladdning och visning av bilder innan du väljer; formatet som kunderna får kan vara annorlunda.

Varför ser min produktbild suddig ut efter uppladdning?

Jämför originalet, din exporterade fil och bilden som levererats av butiken. Vanliga orsaker inkluderar en för liten originalbild, aggressiv komprimering, en liten genererad miniatyrbild som används i ett stort galleri eller en zoomvy som förstorar samma lilla fil. Identifiera vilket steg som orsakade oskärpan innan du ändrar inställningarna.

Kan Pixilo ta bort bakgrunden på ett produktfoto?

Nej. Verktyget för produktbilder fyller tillagd bildyta och redan genomskinliga områden med den valda bakgrundsfärgen. Det identifierar inte produkter och tar inte bort en täckande fotobakgrund. Även det separata verktyget för bakgrundsfärg behöver en bild med redan genomskinlig bakgrund om du vill byta färg bakom produkten.