Shopify Image Optimization: Faster Pages Without Losing Quality
Images are the heaviest thing on most Shopify pages. Here is how to serve them small and sharp — formats, sizes, srcset, lazy-loading and the hero exception.
- Written by
Fahad, CEO & Head of Development- Published
- Reading time
- 2 minutes
On a typical Shopify page, images are 50–70% of the total download weight. Get them right and the page feels instantly faster; get them wrong and no amount of code-trimming will save you. The good news: Shopify's image CDN does most of the heavy lifting for free — you just have to ask it correctly.
Use the right format
Shopify automatically serves WebP to browsers that support it, which is almost all of them. WebP is usually 25–35% smaller than a JPEG at the same perceived quality. You do not need to convert files yourself — upload a good-quality source and let the CDN handle delivery. The web.dev guidance on modern image formats covers the why in detail.
Serve the right size with srcset
The single biggest image mistake is serving one huge file to every device. A phone does not need a 2000px image. Shopify's image_url filter lets you request specific widths, and a proper `srcset` lets the browser choose:
- Request a range of widths (e.g. 400, 600, 800, 1200, 1600) and let `sizes` tell the browser how wide the image will display.
- Never upscale — requesting a width larger than the source just wastes bytes.
- For product galleries, generate thumbnails at thumbnail size, not full size scaled down in CSS.
Lazy-load everything — except the hero
Lazy-loading tells the browser to defer off-screen images until the visitor scrolls near them. It is one of the best things you can do for a long page — with one critical exception.
Stop the layout from jumping
Cumulative Layout Shift happens when images load without reserved space and shove the content around. Always set explicit `width` and `height` (or an aspect-ratio) on every image so the browser holds the space before the file arrives. It costs nothing and it is one of the easiest CLS wins there is.
A quick checklist
- 01Upload high-quality sources; let Shopify serve WebP.
- 02Use image_url with a real srcset and sizes.
- 03Lazy-load below-the-fold images; eager-load the hero.
- 04Set width and height on everything to kill layout shift.
- 05Re-test on the mobile tab of PageSpeed Insights.
Images are one lever. Want the whole store optimised — code, apps, fonts and media — by hand?
See speed optimization
