Optimera Shopify-bilder: mått, format och komprimering

Exempel: förbered en huvudbild för en produkt

Tänk dig ett skarpt foto på 3600 × 2400 pixlar och en butik med kvadratiska huvudbilder. Stegen visar ett arbetssätt, inte uppmätta komprimeringsresultat eller utlovade nedladdningsstorlekar.

1. Välj beskärning. Prova en kvadrat på 2400 × 2400 där hela produkten syns. Ändra kompositionen om den inte ryms i stället för att skära bort en viktig del.
2. Kontrollera enhetligheten. Jämför med två befintliga produktkort och justera utrymmet runt produkten så att storleken upplevs liknande.
3. Förbered en lämplig originalfil. Jämför en kopia på 2048 × 2048 med beskärningen i full storlek. Behåll detaljer för produktvy och zoom. Förstora inte ett litet original bara för att nå siffran.
4. Välj format. Använd en skarp JPG för ett foto med enfärgad bakgrund eller PNG om transparens behövs. Gör komprimeringstester från det bra originalet.
5. Ladda upp och granska. Kontrollera produkt-, kollektions- och mobilvy. Viktiga kanter ska finnas kvar och zoom ska visa användbara detaljer.
6. Kontrollera leveransen. Vid suddig bild eller långsam sida, undersök versionen temat laddar innan du exporterar igen.

När metoden fungerar för ett litet urval, använd den för liknande produkter. Granska undantag separat. Glansiga smycken och en enkel kartong kan behöva olika kvalitetsval trots samma mått och komposition.

Vad Shopify redan gör automatiskt

Skilj på filen du laddar upp och versionen kundens webbläsare hämtar. Att minska uppladdningen från 4 MB till 1 MB minskar inte nödvändigtvis kundens nedladdning i samma proportion.

Shopify skapar flera bildstorlekar och kan leverera WebP eller AVIF när webbläsaren stöder dem. I anvisningarna för temabilder står att manuell komprimering före uppladdning inte behövs. Originalets kvalitet behålls i administrationen, medan butiken kan visa en optimerad version.

Ett tydligt, välkomponerat original är därför mer användbart än en fil som gjorts liten till varje pris. Shopify kan inte återskapa detaljer som hård komprimering har tagit bort. Om temat förstorar en mycket liten version av ett skarpt foto ligger problemet inte i originalet.

Börja med det synliga problemet. Justera komposition eller temats beskärning om produkten beskärs fel. Byt till ett bättre foto om originalet är suddigt. Undersök den levererade versionen om ett skarpt foto laddar långsamt. Ny komprimering är inte rätt första åtgärd i alla tre fallen.

Välj mått efter användningen

Anpassa måtten till bildens största användbara visning, inte bara det lilla produktkortet. Ett skarpt miniatyrfoto kan vara för litet för galleriet eller zoomen. Pixlar anger bredd och höjd; filstorlek i kB eller MB anger datamängden.

Shopify tillåter produkt- och kollektionsbilder upp till 5000 × 5000 pixlar, eller 25 miljoner pixlar, med en filstorlek under 20 MB. För kvadratiska produktfoton föreslås 2048 × 2048 som utgångspunkt, inte som krav för varje butik. Läs kraven för produktmedia innan du förbereder många bilder.

Uppladdningsgränser kan skilja sig mellan olika delar av administrationen. Shopifys dokumentation för Filer anger 20 MB och 25 miljoner pixlar för bilder, medan anvisningarna för temabilder anger 20 miljoner för andra bilduppladdningar. Följ anvisningen och eventuellt felmeddelande för det aktuella fältet i stället för att anta samma gräns överallt.

Ett produktfoto som visas 700 pixlar brett kan dra nytta av en 1400 pixlar bred version på en skärm som använder två bildpixlar per visningspixel. Detta är ett planeringsexempel, inte en regel om att fördubbla varje uppladdning. Zoom kan behöva fler detaljer; små kort bör fortfarande få mindre versioner.

Gör inte alla foton kvadratiska bara för att kvadratiska produktkort är vanliga. En hög flaska, ett klädfoto och en landskapsbild kan behöva olika kompositioner. Håll formen enhetlig inom grupper där det förenklar produktjämförelser.

En banner på 1200 × 600 har bildförhållandet 2:1. En fil på 2400 × 1200 behåller formen och ger fler detaljer på skarpa skärmar. Måtten är exempel, inte Shopifys bannerkrav. Ett högt och smalt mobilområde kan beskära stora delar av sidorna. En separat mobilbild kan hjälpa om temat stöder det.

Välj JPG eller PNG efter innehållet

Prova JPG för vanliga foton utan transparens. Prova PNG för transparenta bakgrunder eller grafik med skarp text och tunna linjer som försämras i JPG. Jämför filer i stället för att välja samma format för hela sortimentet.

Ett PNG-foto kan vara betydligt större än ett JPG, men konvertering hjälper bara om produkten fortfarande återges korrekt. Granska tyg, smycken, träådring och små tryckta etiketter. En liten fil som döljer sådana detaljer är ingen bra produktbild.

Att ladda upp WebP är ett alternativ, inte ett krav för modern bildleverans. Shopify kan välja leveransformat oberoende av originalet. AVIF i webbläsaren betyder inte heller att du måste ladda upp AVIF. Kontrollera vilka format fältet accepterar.

Vit bakgrund är inte transparens: en vit rektangel som redan finns bakom produkten försvinner inte när filen sparas som PNG. Kontrollera transparenta bilder mot sidans riktiga bakgrund, särskilt ljusa kanter och skuggor. Vår guide till bildformat förklarar när olika format är användbara.

Enhetliga produktfoton utan bortskurna detaljer

Bildförhållandet är förhållandet mellan bredd och höjd. Bilder på 2000 × 2000 och 1000 × 1000 är båda kvadratiska men innehåller olika mycket detalj. Samma form räcker inte: produkten bör också fylla ungefär samma andel av varje huvudbild.

Jämför en rad kollektionskort. Om en sko fyller bilden och en annan omges av mycket vitt utrymme ser raden ojämn ut trots samma mått. Anpassa kompositionen för att underlätta jämförelse och lämna tillräckligt utrymme för produktens hela kontur.

Beskärning tar bort delar av bilden, storleksändring ändrar måtten och sträckning förvränger proportionerna. Använd beskärningsverktyget för kompositionen och verktyget för bildstorlek för att minska måtten proportionellt. En flaska som sträcks till en kvadrat ger kunden en felaktig bild av formen.

Förbered serien i verktyget för produktbilder: välj gemensam bildyta och marginaler, beskär eller flytta varje foto och jämför serien under Alla bilder. Kontrollera att liknande produkter tar upp ungefär lika stor del av bilden. En gemensam bildyta rättar inte automatiskt till skillnader i originalens inramning. Exportera en tydlig JPG, eller PNG när du behöver genomskinlighet, och kontrollera den i ditt tema. Verktyget förbereder filer; Shopify sköter fortfarande leveransen och temat visningen.

Beroende på temat kan du ställa in en fokuspunkt i Shopify så att en viktig del förblir synlig vid beskärning. Det hjälper med ett ansikte eller en produkt i en banner, men garanterar inte att hela en bred komposition ryms på en smal skärm. Kontrollera båda skärmstorlekarna.

Lägg om möjligt kampanjrubriker och knappar i temats textfält. Text inbakad i en banner kan bli för liten eller beskäras på mobilen. Riktig sidtext kan radbrytas och markeras; en riktig knapp fungerar som länk i stället för att bara vara en bild av en knapp.

När komprimering före uppladdning hjälper

Komprimering hjälper när originalet är onödigt stort, laddas upp långsamt eller överskrider en gräns. Nyttan är mindre om det redan är skarpt och hanterbart och Shopify levererar en lämplig version. Sänk inte kvaliteten bara för att få varje produktfoto under en godtycklig gräns som 100 kB.

Behåll ett orört original. Om måtten är för stora för användningen, minska först en kopia och prova sedan komprimering. För ett litet innehållsblock kan det spara mer än upprepad komprimering av ett enormt original. Produktzoom kan däremot motivera mer detalj.

Jämför en komprimerad kopia med Pixilos bildkomprimerare. Den tar emot upp till 20 JPG-, PNG- eller WebP-bilder samtidigt, högst 25 MB per fil, och behåller format och mått. Gränserna skiljer sig från Shopifys. Börja med några representativa bilder och kontrollera dem innan resten behandlas.

PNG-komprimeringen är förlustfri: pixlarna förblir oförändrade. En redan välkomprimerad PNG kanske bara blir lite mindre. JPG och WebP kan ändra fina detaljer, så granska den nedladdade kopian. Om filen inte blir mindre behåller Pixilo originalet.

Jämför produktfoton i kundens visningsstorlek och i eventuell zoom. Granska fina strukturer, små etiketter, jämna bakgrunder och transparenta kanter. Återgå till originalet om viktiga detaljer försvinner. Vår guide till optimering av produktbilder beskriver kvalitetskontrollerna närmare.

Skriv användbara alt-texter och tydliga filnamn

Bild-SEO börjar med en bild som hjälper kunden att förstå produkten. Ge filen ett beskrivande namn före uppladdning, till exempel olivgron-canvasryggsack-framifran.jpg. Undvik långa listor av sökord. Namnet ska skilja bilden från en sidovy eller detaljbild.

Alt-text är bildens textalternativ. Beskriv den relevanta vyn, till exempel: ”Olivgrön canvasryggsäck framifrån med två ytterfickor.” Beskriv detaljen i en detaljbild i stället för att upprepa huvudbildens text. Lägg inte till pris, rabatt eller sökord som bilden inte hjälper till att förklara.

Googles anvisningar för bild-SEO rekommenderar beskrivande filnamn och användbara alt-texter utan överdrivna sökord. Omgivande text ger också sammanhang. Filnamnet är en liten ledtråd, inte en ersättning för en bra produktsida.

Lägg till alt-text för en Shopify-produktbild

1. Öppna Produkter i Shopify-admin och välj produkten.
2. Klicka på bilden i medieavsnittet för att öppna förhandsvisningen.
3. Välj Lägg till alt-text, skriv en kort beskrivning och välj Spara alt-text.
4. Upprepa för övriga användbara vyer och beskriv vad varje bild visar.

Stegen följer Shopifys instruktioner för alt-text i produktmedia. Temabanners har egna bildinställningar. Kontrollera föreslagna beskrivningar mot fotot innan du accepterar dem: färg, material och produktdetaljer måste stämma.

En beskrivning i datorns filegenskaper blir inte automatiskt alt-text. Temat kan använda samma bild på olika sätt. Dekorativa bilder kan behöva ett tomt textalternativ, medan länkade bilder ska göra länkmålet begripligt.

Vår guide till alt-text och filnamn förklarar fallen med exempel. Beskrivningar stödjer tillgänglighet och förståelse, men garanterar inte sökplaceringar och ersätter inte saknad produktinformation.

Kontrollera den publicerade butiken på mobil och dator

Förhandsvisningen i administrationen räcker inte. Börja med följande kontroller i den publicerade butiken; utvecklarverktyg behövs inte.

• Öppna en produkt på mobilen. Syns hela produkten? Går viktiga etiketter att läsa och material att urskilja?
• Kontrollera en kollektionsrad. Har huvudbilderna enhetliga former och marginaler?
• Prova galleri och zoom. Tillför fler foton användbara detaljer? Visar vald färg eller variant rätt produkt?
• Ladda om sidan. Kommer huvudfotot fram snabbt, och ligger text och knappar kvar medan bilderna laddas?
• Upprepa på en större skärm. Kontrollera breda banners och större produktvyer, inte bara en smal förhandsvisning.

Undersök en suddig eller långsam bild

Om suddigheten består, kontrollera om temat förstorar en liten version. Om ett litet kort hämtar en enorm bild, kontrollera mindre tillgängliga versioner. Responsiva bilder låter webbläsaren välja storlek för layout och skärm.

Shopifys image_tag-dokumentation beskriver hur temakod erbjuder olika storlekar. Be vid behov utvecklaren kontrollera begärda mått och attributen srcset och sizes. Du behöver inte ladda upp varje miniatyrstorlek separat för att lösa ett kodproblem.

Om du är van vid utvecklarverktyg visar nätverkspanelen vad sidan verkligen hämtar. Du kan också skicka sidan och bilden till temautvecklaren.

1. Öppna produktsidan och utvecklarverktygen och välj Nätverk (Network).
2. Med panelen öppen, stäng av webbläsarens cache under testet och ladda om. Då granskar du en ny nedladdning i stället för en sparad kopia.
3. Filtrera på bilder och hitta huvudfotot. Kontrollera förhandsvisningen så att du inte förväxlar det med en liten galleriminiatyr.
4. Granska överförd storlek, bildmått och svarshuvudet Content-Type. En adress som ser ut som JPG kan leverera WebP eller AVIF.
5. Upprepa efter omladdning med mobilens layoutbredd. Kontrollera att den mindre vyn inte hämtar den största versionen i onödan.

Bedöm inte leveransen enbart efter filstorlek. Högupplöst skärm eller zoom kan motivera större filer. Leta efter tydliga missförhållanden: en liten bild utdragen över hela galleriet eller original i full upplösning för varje litet kort.

Huvudfotot högst upp bör vara tillgängligt snabbt. Bilder längre ner kan oftast vänta tills besökaren närmar sig. Shopify avråder från fördröjd laddning av bilder som syns utan att skrolla. Om första fotot kommer sent, be utvecklaren granska laddningen; omedelbar laddning av hela galleriet kan skapa ett annat problem.

Kontrollera laddhastighet och sidförflyttningar var för sig

När huvudfotot är det största synliga elementet kan det påverka Largest Contentful Paint (LCP), som mäter när den största synliga bilden eller textblocket visas. En mindre fil hjälper om nedladdningen ingår i fördröjningen. En sent startad begäran kan förbli långsam efter komprimering. Googles LCP-guide förklarar skillnaden.

Om ett foto flyttar priset eller köpknappen nedåt när det visas kan temat ha reserverat för lite plats. Det bidrar till Cumulative Layout Shift (CLS), ett mått på oväntade sidförflyttningar. Reservera plats i layouten i stället för att bara komprimera mer. Läs Googles guide till layoutförskjutningar och vår guide till bilder och Core Web Vitals.

Jämför samma sida före och efter under liknande förhållanden och ändra en sak i taget. Skilj PageSpeeds simulerade test från eventuell riktig besökardata. Poäng varierar och verkliga data uppdateras inte direkt efter en ändring. Notera problemet som löstes i stället för en enda högre poäng.

Hitta orsaken innan du ändrar alla bilder

Shopifys prestandaguide för butiker tar även upp teman, appar och tillagd kod. Rapporterna bygger på riktiga besökare. Om bilder redan levereras effektivt, fokusera på kvarvarande flaskhals i stället för ännu en bildapp eller hårdare komprimering av sortimentet.

Vilka bilder bör förbättras först?

Börja med huvudfoto och kollektionskort för en välbesökt produkt, sedan en framträdande startsidesbanner. Prioritera synliga problem: oläsbar etikett, avskuren produkt eller sent foto. Femte bilden i ett sällan besökt galleri är oftast mindre viktig än huvudbilden som avgör om kunden fortsätter titta.

Anteckna sida, originalmått, beskärning, format och förbättringen efter ändringen. Behåll originalet så att ett dåligt resultat kan återställas. Använd en fungerande metod på liknande produkter och granska undantag separat i stället för att ersätta hela sortimentet på en gång.

Vanliga frågor

Vilken storlek är bäst för Shopifys produktfoton?

Ingen storlek passar alla layouter. 2048 × 2048 är en bra start för kvadratiska foton, men tema, komposition och zoom avgör behovet. Använd ett skarpt original inom gränserna och kontrollera den publicerade sidan. Förstora inte ett litet foto enbart till 2048 pixlar.

Komprimerar Shopify bilder automatiskt?

Shopify optimerar leveransen och kan skicka olika storlekar och format. Det betyder inte att originalet i administrationen ersätts av en hårt komprimerad kopia. Du kan förbättra beskärning och överdrivna mått före uppladdning, men varje bild behöver inte komprimeras manuellt.

Bör alla produktbilder vara under 200 kB?

Nej. Ett godtyckligt filstorleksmål kan ta bort viktiga detaljer, särskilt vid zoom. Kontrollera storlek och kvalitet hos versionen kunden verkligen hämtar. Ett litet kort och en stor detaljbild har olika behov.

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

Prova JPG för foton utan transparens och PNG för transparent grafik eller text som försämras i JPG. Granska särskilt produktens fina detaljer. Shopify kan leverera ett annat format än det uppladdade.

Behöver jag en app för bildoptimering?

Inte bara för Shopifys automatiska leverans. En app kan hjälpa med en stor bildsamling eller ett särskilt behov. Ta först reda på vad befintliga verktyg och tema inte gör. Testa effekten på en sida före användning i hela butiken.

Behövs en separat bild för varje skärmstorlek?

Vanligtvis inte för produktfoton: ett bra tema kan begära flera storlekar från samma original. En egen mobilkomposition hjälper om datorbannerns beskärning döljer motivet på telefonen. Det är en layoutfråga, inte skäl att duplicera varje foto.