Shopify Image Optimization: Faster Pages Without Blurry Products
Images are the largest thing most Shopify pages download and the thing shoppers most need to see clearly. Optimisation is about resolving that tension, not simply making files smaller.
How Shopify Handles Images
Shopify serves images from its CDN and can generate resized versions on demand through URL parameters, so you do not need to upload multiple sizes yourself. It also handles format negotiation for you to a degree — check Shopify's current documentation for exactly which formats are served automatically, as this has changed over time.
What Shopify will not do is guess which size your template needs. That part is yours.
Recommended Sizes by Placement
| Placement | Guidance |
|---|---|
| Hero | Widest breakpoint you support; never lazy-loaded |
| Product main | Large enough that zoom stays sharp |
| Collection card | Card width at 2× for high-density screens |
| Blog | Content column width at 2× |
Consistent aspect ratios across a collection matter more for perceived quality than any single file size.
Responsive Images in Liquid
Shopify's image tag helpers generate a srcset across widths you specify, letting the browser pick the right file for the device. Pair it with an accurate sizes attribute describing how wide the image renders at each breakpoint. Getting sizes wrong is the most common reason a "responsive" image still downloads a desktop file on a phone.
Lazy Loading
Lazy-load below the fold. Never lazy-load the LCP image — it is the single most common self-inflicted performance mistake on Shopify themes. See Core Web Vitals.
Compress Before Upload
Resize to the largest size you will actually display before uploading. Shopify can shrink an image but cannot undo an unnecessarily large original, and oversized source files slow every transformation.
Photography That Converts
Consistent background and lighting across the catalogue, enough resolution for zoom to reveal texture, a scale reference, and at least one in-use shot. These affect conversion more than file size does.
Alt Text and File Names
Alt text exists for people using screen readers; describe the image plainly. Search engines use it too, but writing for accessibility produces better text than writing for keywords. Descriptive file names help image search.
Video and GIF Weight
An autoplaying background video can outweigh every image on the page combined. If you use one, keep it short, muted, compressed, and never as the LCP element. Animated GIFs are almost always worse than a short video file.
Image Checklist
- Source files resized before upload
- Responsive widths defined per placement
- Accurate sizes attribute
- LCP image eager, high priority, never lazy
- Explicit width and height on every image
- Consistent aspect ratios per collection
- Descriptive alt text
- Video weight justified
Frequently Asked Questions
What's the best image size for Shopify products?
Large enough that zoom stays sharp at your largest display size, and no larger.
Does Shopify compress images automatically?
It transforms and serves them efficiently, but starting from an oversized original still costs you.
Are image optimization apps worth it?
Occasionally, for bulk cleanup of a legacy catalogue. Fixing the theme's sizing is usually the bigger win.
PNG or JPG?
Photographs as JPG, graphics with flat colour or transparency as PNG. Shopify handles modern format delivery on top.
Does alt text help SEO?
It helps image search and accessibility. Write it for a person.
Where ConversionAB Fits
Product imagery is one of the first things ConversionAB tests on product pages. Use FixMyStore's Speed Checker to confirm the improvement before and after.