Optimering av annonser
Så komprimerar du produktbilder utan att förlora kvalitet
· 4 min read
Ändra storlek på produktbilden till de pixelmått den faktiskt visas i och exportera den sedan som WebP eller AVIF, som vid samma visuella kvalitet vanligen är 25 till 50 procent mindre än JPEG. Sikta på ungefär 100 till 300KB per bild beroende på dess roll på sidan. Googles Largest Contentful Paint-mått räknar en sida som långsam över 2,5 sekunder, och en överdimensionerad huvudbild är ofta den enda resurs som orsakar att gränsen överskrids.
Gör det i RorlAIProduct: Clean studio backdrop for anything boxed or bottled.Varför filstorlek är ett konverteringsproblem och inte bara ett laddningsproblem
Largest Contentful Paint mäter hur lång tid det tar innan det största synliga elementet på en sida har ritats klart. Enligt Googles egna tröskelvärden är under 2,5 sekunder bra, 2,5 till 4 sekunder behöver förbättras och över 4 sekunder dåligt. På en produktsida är det största synliga elementet nästan alltid huvudbilden. Det betyder att en enda överdimensionerad bildfil på egen hand kan avgöra om din produktsida klarar eller missar måttet, oavsett hur snabbt resten av sidan laddas.
Det här är ingen abstrakt poängövning. En huvudbild som laddar långsamt är det första en köpare upplever i din annons, innan de har läst ett ord av beskrivningen eller sett priset.
En realistisk storleksbudget
| Bildens roll | Rimligt mål |
|---|---|
| Huvudbild, går att zooma | 150 till 300KB |
| Andra galleribild eller miniatyr | 60 till 120KB |
| Mobil huvudbild, överst på sidan | under cirka 150 till 200KB |
Det här är arbetsmål samlade från aktuella riktlinjer för bildoptimering, inte en officiell specifikation från någon enskild plattform, och de varierar något med bildens komplexitet. En enkel produkt på vit bakgrund går att komprimera längre än en rörig scen innan kvalitetsförlusten syns. Se därför tabellen som ett tak och inte som en regel du måste träffa exakt.
Ordningen på de steg som verkligen sparar byte
- 1Ändra storlek innan du komprimerarEn kamera eller ett genereringsverktyg exporterar ofta i 3000 till 4000 pixlars bredd. Om fotot visas i ett 1200 pixlar brett fält på din sida, ändra först storleken till ungefär den bredden. Att komprimera en överdimensionerad bild levererar fortfarande en överdimensionerad bild, bara något mindre.
- 2Exportera som WebP där din plattform stöder detWebP är ofta 25 till 35 procent mindre än JPEG vid samma visuella kvalitet, och AVIF kan gå ännu längre. De flesta aktuella e-handelsplattformar och webbläsare stöder WebP. Kontrollera om din levererar det automatiskt eller om filen måste laddas upp direkt i det formatet.
- 3Sätt JPEG-kvaliteten kring 70 till 85 när WebP inte är ett alternativStandardinställningarna för export i redigeringsprogram är ofta onödigt höga. En kvalitetsinställning i det här spannet går i de flesta produktbilder inte att skilja från originalet och är betydligt mindre än en export på 100 procent.
- 4Ta bort inbäddad metadataKamerainställningar, färgprofiler utöver vad sidan behöver och GPS-data som vissa telefoner bäddar in ger filvikt som en köpare aldrig ser. De flesta komprimeringsverktyg tar bort detta som standard; bekräfta att ditt gör det.
Den viktigaste skillnaden:
- Förlustfri komprimering behåller varje pixel exakt som den fångades och krymper knappt ett foto. Den passar grafik med platta färger och skarpa kanter, inte fotografi
- Förlustbehäftad komprimering kastar data som det mänskliga ögat har svårt att märka, och det är där den verkliga besparingen finns för ett foto
- En modern kodare som är rätt inställd hamnar långt under den punkt där en köpare märker skillnaden, långt innan den når punkten där du själv skulle göra det
Var ett genererat eller redigerat foto passar in
Ett foto från vilket redigerings- eller genereringsverktyg som helst behöver samma steg för storleksändring och komprimering som ett foto direkt från kameran. Dessa verktyg exporterar ofta i full upplösning som standard, och en export i full upplösning har samma viktproblem, oavsett om pixlarna kommer från en sensor eller en modell. Behandla det som en råfil som väntar på samma budget, inte som en färdig tillgång.
Common questions
- Blir mina produktbilder sämre av att komprimeras?
- Inte vid en rimlig inställning. Förlustbehäftad komprimering inom de spann som beskrivs här är avstämd för att kasta detaljer som det mänskliga ögat inte registrerar, så ett korrekt komprimerat foto ser identiskt ut i normal visningsstorlek och laddar på en bråkdel av tiden.
- Ska jag använda WebP eller hålla mig till JPEG?
- Använd WebP om din butiksplattform stöder det, eftersom det vanligen är 25 till 35 procent mindre än JPEG vid samma kvalitet. Gå tillbaka till en väl inställd JPEG bara om din plattform eller ditt tema inte levererar WebP automatiskt.
- Behöver jag separata bildstorlekar för mobil och dator?
- Helst ja. En mobilköpare ser fotot på en mycket mindre yta än en datorköpare, så att leverera en mindre fil till mobil sparar verklig laddningstid utan synlig kvalitetsförlust på den skärmen.
- Påverkar bildens filstorlek verkligen försäljningen, eller bara ett hastighetsbetyg?
- Sidhastighet och konvertering hänger ihop så nära att de flesta e-handelsplattformar numera behandlar det som en ranknings- och konverteringsfaktor, inte bara ett labbmått. En huvudbild som på egen hand trycker sidan förbi tröskeln på 2,5 sekunder för Largest Contentful Paint är en verklig, mätbar fördröjning som en köpare upplever, inte ett abstrakt betyg.