Shopify Image Optimization: Sizes, Limits and a Mac Workflow

Uploaded images must be under 20 MB and under 20 megapixels. Whichever you hit first produces a “too large” error, and a file under 20 MB can still fail on pixels. Both numbers come from Shopify’s own help pages, summarized here.

One inconsistency to know about. The product media page says images can be “up to 5000 x 5000 px, or 25 megapixels”, while the theme images page sets the upload limit at 20 megapixels. Plan for the stricter 20 MP. A 48-megapixel camera file, around 8064 × 6048, is over it whatever its byte size. Pages checked read 11 October 2026; Shopify can change these.

Shopify recommends a square 2048 × 2048 pixel image for products. That is about 4.2 megapixels, roughly a fifth of the 20 MP cap, so it leaves plenty of room and rarely hits the byte limit either.

Square is a recommendation, not a requirement; nothing we read says other shapes are rejected. A consistent shape across a collection is what keeps a grid tidy, and the right shape depends on your theme. For rectangular products, Smol’s fit mode scales the photo inside the box without cropping, so a 4:3 frame set to 2048 comes out 2048 × 1536. Its fill mode crops to the box, with no say over what is cut, so check those results by eye.

Upscaling does not help. The image_url filter will never make a rendition larger than the original, per Shopify’s Liquid documentation. A 1200 px original stays 1200 px even if a theme asks for 2048, so shoot or export at least at the size your zoom needs.

Shopify picks the delivery format and makes the smaller sizes itself, but it does not compress your upload. So the original you send sets the ceiling for quality, and the size you choose decides how large every rendition can be.

What Shopify does is documented. Per its theme images page, it chooses the best delivery format, WebP or AVIF for browsers that support them, turns GIFs into animated WebP, and removes color profiles when images display. Its product media page adds that different sizes are created automatically for different parts of your theme. The image_url docs add that output is not guaranteed byte-identical to the source.

Here is what a prepared original still changes, and what it does not.

• It gets past the upload caps. A file over 20 MB or 20 MP does not go in at all.
• It sets your quality. Because the upload is not compressed, a bloated original stays bloated as the source for every rendition, and a cleanly encoded one does not.
• It speeds the admin. A 3 MB file uploads faster than a 19 MB one, which adds up across a large import.
• It drops metadata. Smol strips EXIF, GPS, IPTC and XMP by default, which includes copyright and contact fields. Switch that off if you want them kept.
• It does not change the delivered format. Shopify decides that. Exporting AVIF yourself will not make Shopify serve AVIF to every browser.

Set the output to JPG for photographs, quality 80, maximum dimension 2048, mode fit. Smol’s image default is quality 75 with a 2000 px resize, so raise the dimension to 2048 if you want Shopify’s recommended size exactly.

Compress does the quality work. Convert to JPG ignores the quality slider and writes a large, high-quality file, so use Compress with the output set to JPG when you take HEIC or TIFF to JPG. Smol also cannot promise a file will land under a byte cap, so sort the outputs by size and rerun any that miss. Smol will not write a larger file than the original on the direct compress path; if compressing would make it bigger, it keeps the original.

For scale, on 24 small Kodak test photos (768 × 512 high-quality JPEGs, default settings), Smol’s JPEGs came out 69.3% smaller, and PNG to AVIF at quality 65 saved 92.1%. Camera files behave differently, and Smol’s 2000 px default resize also applies to them. See the benchmark page for the method.

Prepare the whole folder once, then upload the copies. The same run works for a new product drop or a catalog cleanup.

1. 1

   Collect the originals in one folder

   Smol writes a copy with a _compressed suffix beside each original and does not overwrite by default.

2. 2

   Drag the folder into Smol

   Mixed batches are fine: photos, a PDF size chart and a short video go in together.

3. 3

   Set JPG, quality 80, maximum dimension 2048, fit

   For PNG graphics choose PNG. Leave metadata stripping on unless you need copyright fields kept.

4. 4

   Run it and sort the outputs by size

   The largest output tells you whether the batch clears your target. Rerun any that look soft at the zoom size, with a higher quality.

5. 5

   Upload the compressed copies to Shopify

   Name files for what they show before upload, and add alt text in the admin. Image SEO in the theme is covered in image optimization for Core Web Vitals.

Do watched folders help here?

Only for folders of fresh, unoptimized files such as a photographer’s export. Watched folders can make already-optimized files larger, a known defect described in watching a folder and compressing it, so do not point one at a folder you have already processed.

Lazy-load only images outside the first screen. Shopify’s performance best practices say to always load images visible in the initial viewport eagerly, to mark the LCP image with fetchpriority="high", and to include width and height attributes or use image_tag, which adds them and builds srcset.

That is the theme half of Shopify image optimization. It is separate from file prep, and a prepared original helps it: srcset renditions are built from your upload, so a clean 2048 px source gives every size a good starting point. For the broader picture of measured gains, read image optimization for web developers, or compress images for web for the Smol page on it.

Free and built-in options come first, and they are good for small jobs. The right choice depends on volume, privacy and whether you want to run an app inside the store.

Selling elsewhere too? See the e-commerce product images page and the WooCommerce version. Other Mac options are compared in every method to compress images on Mac and the best image compressor for Mac.

Smol prepares files before upload. It is the wrong fit in these cases:

• Your images are already in Shopify and you want them changed there. Smol cannot edit them; re-export, compress and re-upload, or use a store app.
• You need pixel-identical, lossless optimization. Smol always re-encodes images; ImageOptim has a lossless mode.
• You are not on a Mac. Smol is macOS only.
• You need a build-time or server step for a headless storefront. A library in your build, or the Smol API, fits that better.
• You need an exact byte target on every file. Smol sets quality and pixel size, so you check the results.