Shopify bildstorlekar: 500 KB-gränsen

Använd 2048 gånger 2048 pixlar som din Shopify-master och håll varje levererad fil under 500 KB. Shopify tillåter bilder upp till 20 MB och 4472 pixlar kvadratiskt, men de siffrorna beskriver vad plattformen tolererar snarare än vad en snabb webbutik behöver.

Siffran 20 MB är vad de flesta guider citerar, och det är fel siffra att utgå ifrån. Vad Shopify tillåter och vad Shopify belönar är två olika saker. En produktsida med 8 bilder på 3 MB vardera ger en sida på 24 MB, och mobilshoppare lämnar innan den har laddat klart.

Shopify bildstorlekar efter placering

Produktbilder bör vara kvadratiska i 2048 pixlar, medan banners, kollektionskort och logotyper behöver sina egna mått. Att använda en och samma storlek överallt ger utsträckta banners och beskurna kollektionsbilder.

Teman beskär bilder på olika sätt, och en banner som ser helt rätt ut i förhandsvisningen på datorn blir ofta avskuren på mitten i en mobil. Håll den viktiga delen av en banner i de centrala 60 procenten så att inget tema kan beskära bort den.

Varför 500 KB är siffran som räknas

Sidans totala vikt avgör hur snabbt en webbutik laddar, och bilder står för det mesta av den vikten på en typisk produktsida. En sida under totalt 2 MB laddar smidigt på mobildata, vilket en sida på 24 MB inte gör.

Mobilshoppare utgör majoriteten av trafiken för de flesta butiker, och mobiluppkopplingar varierar långt mer än bredband på kontoret. Varje sekunds laddtid kostar konverteringar, vilket gör bildvikt till en intäktsfråga snarare än en teknisk fråga. Att minska 8 produktbilder från 3 MB till 300 KB tar bort 21 MB från sidan och ändrar ingenting som en kund kan se.

Komprimerar Shopify bilder åt dig

Shopify levererar storleksändrade varianter via sitt innehållsnätverk (CDN) och konverterar automatiskt till WebP för webbläsare som stöds. Plattformen gör ett rimligt jobb, och den arbetar utifrån vad du än laddar upp.

Den sista punkten är begränsningen. Shopify skapar mindre varianter utifrån ditt original, så en dåligt komprimerad uppladdning på 5 MB skapar större varianter än vad en välförberedd uppladdning på 400 KB skulle göra. Att komprimera före uppladdning minskar också din egen lagringsanvändning och gör massimporter mycket snabbare, eftersom en import av 500 produkter flyttar 200 MB istället för 2,5 GB.

Hur du förbereder bilder för Shopify

Följ dessa 6 steg för att skapa en snabb produktsida.

1. Exportera en kvadratisk master i 2048 gånger 2048 pixlar från ditt bildredigeringsprogram.
2. Ändra storlek på alla banners eller livsstilsbilder till deras faktiska visningsbredd, fördubblad för högupplösta skärmar.
3. Konvertera fotografier till WebP, eller behåll JPG om ditt arbetsflöde kräver det, eftersom Shopify konverterar vilket som.
4. Komprimera till en målstorlek, använd 300 KB för produktfoton och 400 KB för banners.
5. Döp filer efter produktkod och vinkel så att en CSV-massimport kopplar bilder till rätt produkter.
6. Ladda upp och kontrollera produktsidan på en mobil snarare än bara i förhandsvisningen på datorn.

WebP på Shopify

Shopify har levererat WebP direkt under flera år och konverterar uppladdade JPG- och PNG-filer automatiskt för webbläsare som stöds. Att ladda upp WebP direkt är tillåtet och ger dig kontroll över komprimeringen istället för att överlämna den till plattformen.

WebP nås samma visuella kvalitet som JPG vid 25 till 35 procent mindre filstorlekar, vilket är värdefullt på en sida med 8 fotografier. Det enda fallet att undvika är att ladda upp WebP när filen senare ska laddas ner av en leverantör eller skickas till ett tryckeri, eftersom de destinationerna fortfarande förväntar sig JPG.

Fixa en långsam produktsida

Börja med den största bilden på sidan, eftersom den enskilt största filen oftast står för det mesta av fördröjningen. I en Shopify-butik är det normalt startsidesbannern eller det första produktfotot.

• Ändra storlek före komprimering. En banner på 4000 pixlar i ett utrymme på 1920 pixlar slösar bort 75 procent av sin data.
• Minska antalet bilder ovanför vikningen (above the fold). Ett galleri med 12 bilder som laddas samtidigt fördröjer allt annat.
• Kontrollera att slö laddning (lazy loading) är aktiverad för bilder under vikningen, vilket de flesta moderna teman hanterar som standard.
• Ersätt animerade GIF-filer med video, eftersom en kort GIF ofta väger mer än hela resten av sidan tillsammans.
• Granska dina appar. Recensionsmoduler, popups och förtroendebadgar laddar ofta sina egna bilder och skript.

Alt-text och bildfilnamn

Skriv alt-text som beskriver produkten för kunder som använder skärmläsare, och döp filer efter produkten snarare än efter kameran. En fil som heter IMG_4821.jpg säger ingenting till sökmotorer och kunder.

Använd ett mönster som navy-linen-shirt-front.jpg, som förblir läsbart i en massimport, sorteras förutsägbart i en mapp och beskriver bilden i sökresultat. Alt-text bör berätta vad fotografiet visar, inklusive färg, material och vinkel, utan att upprepa produkttiteln ord för ord. Båda fälten tar sekunder per produkt och förbättrar hur en butik syns i bildsök.

Testa ändringar innan de rullas ut

Bearbeta 5 produkter först, publicera dem och kontrollera sidorna på en riktig mobil innan du kör hela katalogen. Ett inställningsfel applicerat på 500 produkter tar betydligt längre tid att återställa än att förhindra.

Kontrollera 3 saker på testprodukterna. Bekräfta att bilderna ser skarpa ut vid full zoomning, eftersom kunder använder zoom flitigt på kläder och smycken. Bekräfta att kollektionsrutnätet visar konsekvent beskärning. Bekräfta att sidan laddar snabbt på mobildata snarare än på kontorets bredband. Först därefter applicerar du samma inställningar på allt annat.

Bildappar kontra att göra det före uppladdning

Komprimeringsappar tar betalt varje månad för att lösa ett problem du kan lösa en gång före uppladdning. Apparna är användbara när en butik tar emot nya bilder hela tiden från många personer och ingen kontrollerar vad som laddas upp.

En butik med en stabil katalog och en person som hanterar bilder behöver inte en återkommande avgift. Att komprimera biblioteket en gång och komprimera nya fotografier när de anländer ger samma resultat. Omvärdera när katalogen växer förbi vad du kan hantera för hand, eller när flera medarbetare laddar upp bilder utan att följa en kravspecifikation.

Vanliga bildmisstag på Shopify

Att ladda upp direkt från kameran är det dyraste misstaget, eftersom ett fotografi på 24 megapixel innehåller 10 gånger den data en webbutik kan visa. Plattformen accepterar filen, och sidan får betala för det.

Två andra misstag dyker upp regelbundet. Att blanda bildformer i en kollektion ger ett ojämnt rutnät, eftersom teman beskär till kvadratiskt och ett stående fotografi förlorar sin topp och botten. Att använda PNG för produktfoton ökar filstorlekarna med 3 till 5 gånger utan någon synlig nytta, eftersom PNG sparar varje pixel exakt och ett fotografi har inga plana ytor att utnyttja.

Att hålla en konsekvent katalog

Bearbeta hela katalogen i en körning så att varje produktfoto delar samma mått, komprimering och inramning. Kunder som jämför produkter lägger märke till inkonsekvens även när de inte kan sätta ord på det.

Konsekvens hjälper också kollektionsrutnätet, där bilder med matchande form och ljusstyrka upplevs som en designad sida snarare än en hopmonterad. Ställ in måtten och målstorleken en gång, applicera dem sedan på varje fil istället för att justera varje produkt individuellt.

Bearbeta en katalog i ett enda steg

Släpp in upp till 500 bilder samtidigt, eller dra ett ZIP-arkiv direkt från din fotograf, så kommer varje fil tillbaka storleksändrad och komprimerad efter samma specifikation. En katalog som tog en eftermiddag i ett skrivbordsprogram blir klar på några minuter.

Allt körs inuti din webbläsare på din egen processor, så opublicerade produkter, säsongskampanjer och leverantörsfoton når aldrig en server. För en butik som förbereder en lansering under embargo är det skillnaden mellan ett kontrollerat offentliggörande och en läcka att hålla filerna lokala, och det kostar ingenting extra.