Bildoptimering i Shopify: format, storlek och sidhastighet
Att komprimera bilder för webben gör Shopify åt dig, eftersom butikens bild-CDN levererar varje bild i ett lämpligt format, i rätt storlek för skärmen och komprimerad. Din uppgift är att ladda upp bra original i rimlig storlek, med samma sidförhållande för alla huvudbilder och en beskrivande alternativtext. Enligt Shopify påverkar temat, apparna och extra kod från tredje part hastigheten mest, så mät innan du lägger tid på varje enskild bild.
Det Shopify gör själv
Enligt Shopifys hjälpsida Förbättra din webbshops prestanda (läst 23 oktober 2026) ingår:
- snabba servrar utan begränsning av bandbredd,
- ett CDN från Cloudflare som levererar butiken snabbt över hela världen,
- ett bild-CDN som tillsammans med temat levererar bästa möjliga bildformat, anpassat i storlek och komprimerat,
- HTTP/2 och gzip-komprimering för filer och sidor.
Shopify skapar dessutom automatiskt olika storlekar av varje bild för olika delar av temat.
Det du gör
Enligt Shopifys hjälpsida Typer av produktmedia får bilder vara upp till 5000 × 5000 pixlar och mindre än 20 MB. För kvadratiska produktbilder ger 2048 × 2048 pixlar enligt Shopify oftast bäst resultat. Ladda gärna upp bilder i den storlek du behöver i stället för fulla kamerafiler; mindre original laddas upp snabbare.
Använd samma sidförhållande, alltså förhållandet mellan höjd och bredd, för alla huvudbilder, annars blir kollektionssidorna ojämna. Och ge varje bild en alternativtext: under Produkter öppnar du produkten, klickar på bilden för att Förhandsgranska media och väljer Lägg till alternativtext. Shopify rekommenderar högst 125 tecken. Hur bilder och text samverkar på produktsidan beskriver vi i guiden om produktsida och SEO.
Mät rätt
- Öppna Analysverktyg > Rapporter och välj Webbprestandarapporter. De bygger på Core Web Vitals från riktiga besökare: laddningstid (LCP), layoutstabilitet (CLS) och svarstid vid interaktion (INP). Rapporterna kräver behörighet till rapporter, och butiken får inte vara i privat läge för att samla data från riktiga besökare.
- Kör enskilda sidor i Googles PageSpeed Insights för mer detaljerade mätvärden.
- Ändra en sak åt gången och mät igen efter några dagar.
Titta också särskilt på mobilen. Hur du bygger butiken för mobilen först står i guiden om mobilanpassad butik.
GTmetrix och Pingdom
Verktyg som GTmetrix och Pingdom testar en sida och listar förslag. Enligt Shopify föreslår sådana verktyg ofta ändringar som Shopify redan har gjort eller som inte gäller Shopify-butiker, till exempel om CDN och komprimering. Använd dem för att jämföra före och efter en ändring. För regelbundna tester kostade GTmetrix enligt sin prissida den 31 oktober 2026 från 5,99 USD per månad (Lite, 50 tester).
Större bromsar än bilder
| Faktor enligt Shopify | Vad du gör |
|---|---|
| Temat | använd ett uppdaterat, optimerat tema; Horizon-familjen och Shopifys Online Store 2.0-teman är kostnadsfria och optimerade |
| Animationer och sidövergångar | mät före och efter att du aktiverar dem |
| Många sektioner på en sida | ta bort sektioner som inte behövs |
| Stora kollektioner | aktivera sidindelning så att färre produkter laddas på en gång |
| Appar och kod från tredje part | ta bort det som inte ger tillräckligt värde, rensa taggar i tag managern |
Börja med raden som gäller din butik och mät igen efter ändringen i Webbprestandarapporter.