Most advice about Shopify images tells you to compress hard, convert to WebP, and aim for a file under 300KB. That advice is years out of date, and following it now makes your store look worse without making it faster.
Shopify already does this work, and does it better than you can by hand.
The specs
From Shopify's own documentation.
| Maximum dimensions | 5,000 x 5,000 px, or 25 megapixels |
| Maximum file size | Under 20MB |
| Recommended square size | 2,048 x 2,048 px |
| Best file types | PNG first, then JPEG |
| Also accepted | TIFF, BMP, GIF, SVG, HEIC, WebP, including animated GIF and WebP |
If you have seen 4,472 x 4,472 or 20 megapixels quoted elsewhere, that is a different limit being repeated out of context. For product and collection images it is 25 megapixels and 20MB.
What Shopify does for you
Two things, and between them they cover almost everything the optimisation guides tell you to do manually.
It picks the format. Shopify's Imagery service works out what the customer's browser supports and serves the image in the best available format. You do not need to convert anything to WebP. Upload a PNG and a modern browser will be served something modern; an older one will not be broken.
It generates the sizes. When you add an image, Shopify automatically creates different versions for different places in your theme. The large one goes on the product page where someone is examining detail, a compact one goes on collection pages where a big file would be waste. Themes can also ask the CDN for a specific size.
So the visitor on a phone looking at a collection grid is not downloading your 2,048 pixel original. They never were.
Which is why compressing is usually a mistake
Every size Shopify serves is derived from the file you upload. Compress that file to 200KB before uploading and you have not made the collection thumbnail smaller, because Shopify was going to generate a small version anyway. What you have done is bake your compression artefacts into every version it generates, including the zoomed product shot where they are most visible.
Upload the good file. Let the platform do the derivation. That is the thing it is for.
The exception is if you are routinely bumping the 20MB ceiling, in which case you have a different problem, probably an uncompressed TIFF straight off a camera.
If your store is slow, check this before blaming images
Because Shopify handles image delivery, images are usually not the reason a Shopify store feels slow. Apps and theme JavaScript usually are. Every installed app that injects a script runs on the customer's device, and those accumulate quietly over a couple of years of trying things.
Worth measuring before spending a weekend recompressing a catalogue that was never the bottleneck. If a page is slow with images cached, the images are not the cause.
The one thing Shopify cannot fix
Aspect ratio.
Shopify's documentation is explicit that when product images sit side by side on a collection page, they display at different sizes unless you have used a consistent ratio for your main images. Themes can ask the CDN for consistent sizing, but that crops or pads, and what gets cropped is decided by the dimensions rather than by anyone looking at the photograph.
This is the one that makes a store look amateur, and it is invisible while you are uploading because you see each product one at a time. It only appears on the collection page, where the eye reads a row of mismatched shapes as carelessness before it reads anything else.
So the rule worth following is the boring one. Pick a ratio, square is easiest, and use it for every main image. Not approximately. Exactly.
A practical setup
- Shoot or generate at 2,048 x 2,048, square, for every main image.
- Export as PNG, or JPEG at high quality. Do not compress for the web.
- Keep the ratio identical across the catalogue, including the products added in a hurry later.
- Use the gallery for the shapes that do not fit. Only the main image has to be consistent.
- Leave format conversion and resizing alone.
Where we fit
The ratio discipline above is simple and tedious, which is why catalogues drift. Products get added by different people at different times, and the collection page slowly becomes uneven.
Instant Studio exports at a fixed ratio per marketplace, so a product photographed today and one added in six months come out the same shape without anyone having to remember. One photo in, a set of shots back, sized consistently.
That is a smaller claim than most tools make, and it is the part that shows on a collection page.
Sources
Dimensions, file size limits, accepted formats, the Imagery service's format selection, automatic size generation and the aspect ratio guidance are taken from Shopify's Help Centre page on product media types, read on 24 October
- The point about apps and theme JavaScript is general reasoning rather than a measured claim about your store, so measure before acting on it. Shopify changes these limits occasionally; check the current page before rebuilding a workflow around them.