Upload one product photo to Shopify and your store will quietly serve dozens of versions of it: a 165-pixel thumbnail on a collection grid, a 1066-pixel card on a desktop, a 1946-pixel zoom image on the product page, each one possibly delivered as AVIF, WebP or JPEG depending on the shopper's browser. All of that happens on Shopify's CDN (content delivery network) through parameters appended to the image URL. Understanding how this machinery works tells you exactly what you should upload, what the CDN will fix for you, and what it cannot fix no matter how clever your theme is.
What the Shopify CDN actually does to your image
Every image you add to a product is stored once at its original size on cdn.shopify.com. Your theme never links to that original directly. Instead, Liquid's image_url filter builds a URL with instructions on the end, and the CDN generates and caches that variant the first time anyone requests it. A typical product card image URL ends in something like ?v=1712345678&width=533. The v value is a cache-busting version stamp that changes when you replace the image; the width is the resize instruction.
The CDN can do five things to an image on request:
- Resize by width, height or both, up to a maximum of 5760 pixels on either side.
- Crop when the requested dimensions do not match the original aspect ratio, anchored to top, centre, bottom, left or right, or to a precise region you define.
- Pad with a solid colour instead of cropping, so a portrait photo can sit inside a square frame.
- Convert format, automatically picking AVIF, WebP or JPEG per request based on what the browser accepts, or forcing JPEG or progressive JPEG if the theme asks.
- Recompress at a quality setting between 10 and 90 if the theme specifies one.
There is one thing it will never do: enlarge. Shopify's own performance team spells it out: if you request 1000 pixels from a 500-pixel original, the URL will say 1000 but the file that arrives is still 500 pixels wide. Every quality ceiling in your store is set at upload time.
The URL parameters, explained
Developers reach these through Liquid, but the same parameters work on any public product image URL, which makes them handy for testing. Add them after the question mark, joined with ampersands.
| Parameter | Accepted values | What it does |
|---|---|---|
| width | 1 to 5760 | Resizes to this width; height follows the original ratio unless also set. Never upscales. |
| height | 1 to 5760 | Resizes to this height; width follows the original ratio unless also set. |
| crop | top, center, bottom, left, right, region | Chooses which part survives when width and height change the aspect ratio. Default is center. |
| crop_left, crop_top, crop_width, crop_height | Pixel values | Used with crop=region to cut an exact rectangle from the original before any resize. |
| pad_color | 3 or 6 digit hex, e.g. fff or ffffff | Pads instead of cropping when the ratio changes. |
| format | jpg, pjpg | Forces JPEG or progressive JPEG. Only PNG to JPG, PNG to PJPG and JPG to PJPG conversions are allowed. |
| quality | 10 to 90 | JPEG compression level. Lower means a smaller file and softer image. |
Two details catch people out. First, at least one of width or height must be present, otherwise the filter throws an error. Second, the format parameter only lets you go from lossless to lossy. You cannot ask the CDN to turn a JPEG into a PNG with a transparent background, because that information does not exist in the source. Transparency has to be baked into the file you upload.
What your theme requests: the Dawn numbers
Dawn, Shopify's reference theme and the basis for most current free themes, is a good proxy for what your images are asked to do. Its product card snippet builds a srcset list at 165, 360, 533, 720, 940 and 1066 pixels wide, plus the full original, and uses the 533-pixel version as the fallback. Crucially, each candidate is only included if your original is at least that wide. The product page gallery goes further, requesting 246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646 and 1946 pixels, with video posters and 3D model placeholders at 2048 pixels.
The browser then picks the candidate closest to the space the image will occupy, multiplied by the screen's pixel density. On a modern phone with a 3x display, a card that renders at 180 CSS pixels will happily pull the 533 or 720 version. On a retina laptop the zoom modal reaches for 1946. If your original is 1200 pixels wide, every candidate above 1200 simply disappears from the list and the gallery serves a visibly softer image on large screens.
Why the CDN does not solve file size for you
It is tempting to conclude that because the CDN recompresses everything, upload size no longer matters. It matters in three places. The original is what admin users, apps and feeds pull, so a 15 MB TIFF slows down every bulk export and third-party sync. Marketplaces and ad platforms that import from your Shopify feed often take the largest available URL, not a resized one. And Shopify's own upload limit is firm: under 20 MB per file and no larger than 5000 by 5000 pixels, or 25 megapixels total. A 48-megapixel phone photo straight off the camera will be refused.
What to upload: the practical spec
Working backwards from how the CDN behaves gives a clear target for product images on Shopify.
| Attribute | Recommendation | Reason |
|---|---|---|
| Dimensions | 2048 x 2048 px for square products; at least 2000 px on the long side otherwise | Covers Dawn's largest 1946 px gallery request and Shopify's own 2048 recommendation, without wasting storage. |
| Aspect ratio | Identical across every image in a collection | Theme cards request a fixed ratio; mixed ratios get centre-cropped or letterboxed unevenly. |
| Format | JPEG at quality 80 to 85, or PNG only if transparency is required | The CDN converts to AVIF or WebP on delivery anyway; uploading WebP is fine but gains little. |
| File size | Under 1 MB, ideally 300 to 600 KB | Fast uploads, lean exports and feed imports; the CDN recompresses storefront copies regardless. |
| Colour profile | sRGB, embedded | Conversion to AVIF and WebP assumes sRGB; wide-gamut files shift in hue. |
| Subject placement | Centred with even margins on all sides | The default crop is center. Off-centre products lose edges when the ratio changes. |
The crop problem nobody notices until a customer does
Because the default crop anchor is center, any theme section that forces a ratio, such as a square collection grid fed by portrait photos, will slice equal amounts from the top and bottom. A tall bottle photographed with its cap near the top edge will lose the cap on the collection page while looking perfect on the product page. The fix is upstream, not in the theme: either shoot and resize every image to the ratio your theme uses, or leave generous headroom so the crop lands in empty background. A batch tool such as PixelPrep can resize an entire catalogue to a consistent square or portrait canvas, padding with white where needed, so the CDN never has to guess which part of the product matters.
Format conversion: AVIF, WebP and when to check
Shopify announced automatic AVIF delivery in its developer changelog in August 2022, alongside the WebP conversion it already performed. The system looks at each request, checks which formats the browser advertises, then picks whichever of AVIF, WebP or JPEG gives the best balance of quality and byte size for that particular image. In practice most product images are served as WebP today, with AVIF appearing for some sources. You can verify what your shoppers receive by opening a product page, switching your browser's developer tools to the Network tab, filtering by images, and reading the Type column. If you see jpeg across the board, your theme is probably forcing the format parameter and leaving savings on the table.
Two caveats. Animated GIFs and animated WebP files are passed through rather than converted, so keep them small at source. And 16-bit PNGs have historically caused display problems in some Safari versions after AVIF conversion; export PNGs as 8-bit to be safe.
Where this stops: everywhere other than your storefront
The CDN parameters exist only on cdn.shopify.com. The moment an image leaves Shopify, it is just a file again. Amazon wants a JPEG at 1600 pixels or more on the long side for zoom, Shopee and Lazada want a square 1:1 under 2 MB, Google Merchant Center wants at least 800 x 800 and ignores anything after the question mark in a URL for its own resizing. If you sell across several channels, you still need to produce correctly sized files for each one, and the Shopify-optimised 2048 square is a good master to start from. PixelPrep's marketplace presets take that master and produce each channel's spec in one pass, which is far less error-prone than resizing by hand.
Checklist: making the CDN work for you
- Export masters at 2048 x 2048 px (or 2000 px on the long side), sRGB, JPEG quality 80 to 85, under 1 MB.
- Keep one aspect ratio per collection so centre-cropping on cards is predictable.
- Centre the product with even margins, leaving extra space on the axis your theme crops.
- Never rely on the CDN to enlarge: if the original is under 1946 px wide, the zoom gallery will look soft on large screens.
- Use PNG only for genuine transparency, exported as 8-bit.
- Check the Network tab once per theme update to confirm images arrive as WebP or AVIF, not forced JPEG.
- Stay under Shopify's hard limits: 20 MB per file, 5000 x 5000 px, 25 megapixels.
- Produce separate correctly sized files for Amazon, Shopee, Lazada and ad platforms, because URL parameters do not travel with the image.
The Shopify CDN is a genuinely good piece of infrastructure. It handles the tedious part of responsive images so well that most merchants never think about it. But it is a delivery system, not a repair shop. Give it a sharp, centred, consistently proportioned original at the right size and it will do the rest. Give it a 900-pixel phone snap with the product jammed in one corner and every page on your store will show that decision.