Shopify Image Optimizer Checklist for Product Photos

You finish a product shoot, export 40 photos, upload them to Shopify, and the collection page crawls on a phone. Nothing is broken. The theme is fine, the apps are fine. The photos are just too heavy, and every one of them loads at full camera resolution.

That is the usual state of a Shopify store's images, and it is fixable with a short checklist. A Shopify image optimizer preset handles the repetitive part: resize, re-encode, and cap the file weight before the photo ever reaches Shopify. The rest is knowing which settings to pick and which mistakes to avoid.

What does a Shopify image optimizer preset do?

A Shopify image optimizer preset applies a fixed set of export rules to a product photo: fit the long edge inside 2048 pixels, encode it as WebP, and search for the highest quality under a weight cap, 300KB in SnapShrink's preset. You drop in camera files and get back store-ready images without touching a quality slider per photo.

Shopify accepts images up to 4472 by 4472 pixels, but that ceiling is not a target. A product photo displayed at 800 pixels wide on a collection grid gains nothing from a 4000-pixel source. The 2048-pixel fit keeps zoom sharp on retina screens while cutting the pixels Shopify has to serve by more than half compared with a straight camera export.

Shopify image optimizer settings: size, format, and weight

For product photos, export at 2048 pixels on the long edge, WebP format, and a weight cap of 300KB per image. That combination keeps zoom sharp, keeps each file predictable, and works in every modern browser. PNG stays reserved for graphics with hard edges, and JPEG stays the fallback for tools that cannot read WebP.

The three settings do different jobs, so it helps to set them in order. Size first: if the layout never shows the photo wider than 1200 pixels, a 2048-pixel master still leaves room for zoom without shipping camera-sized files. Format second: WebP cuts roughly a quarter to a third off an equivalent JPEG for photos, which is the single biggest saving most stores leave on the table. Weight last: a 300KB cap is a ceiling, not a goal. Flat product shots on white backgrounds often land well under it, and that is fine.

Photo type	Export settings	Why
Product photo on white or lifestyle background	2048px, WebP, max 300KB	Sharp zoom, predictable weight
Logo, badge, or graphic with hard edges	PNG, original size	WebP and JPEG both soften hard edges at low quality
Photo headed to an old tool or email	JPEG, quality 80 to 85	Opens everywhere, still reasonably small

How Shopify's CDN and srcset fit in

Shopify serves product images through its CDN, which generates resized variants from the file you upload, and your theme's srcset markup picks the variant per screen. That pipeline works best with a sane master: a 2048-pixel WebP gives the CDN a source for every variant, while a 6MB camera file makes every variant heavier than it needs to be.

One practical check after upload: open the collection page in DevTools, filter the Network tab by Img, and sort by size. If any product image still shows up in megabytes, that product is still serving its original file, and it is the one to fix first.

The checklist, start to finish

The full pass takes about ten minutes per product once the preset is set up: start from the original file, fit the long edge and encode, check the result at full zoom, then upload and confirm the product page uses the new file.

1. Start from the highest-quality original. Never re-export from a file you already compressed for another channel, since each lossy pass throws away detail you cannot get back.
2. Fit the long edge to 2048 pixels and keep the photo's own aspect ratio. Do not force square crops unless your theme actually requires them.
3. Encode WebP with a 300KB weight cap. SnapShrink's Shopify image optimizer preset applies steps 2 and 3 in one pass, in your browser, with nothing uploaded.
4. Check the result at full zoom before you upload it. Look at edges, fabric texture, and any text on packaging, since those are the first places over-compression shows.
5. Name the file descriptively, like walnut-desk-organizer-front.webp. It keeps your media library searchable and gives search engines a readable filename.
6. Add alt text in Shopify admin after upload. Describe the product, not the filename, since alt text is what screen readers and image search actually read.
7. Upload the optimized file to the product and confirm the product page uses it, not the older original still sitting in your files.

Three mistakes that undo the work

The first is uploading the optimized photo and then letting the product keep pointing at the original. Shopify keeps both files, so check the product page after you swap and confirm the new file is the one actually serving on the page.

The second is saving photos as PNG out of habit. PNG is the right call for logos and graphics, but a product photo saved as PNG can weigh several times its WebP version, and that weight lands on every shopper who opens the page.

The third is optimizing once and then reusing that compressed file as the source for the next channel. A marketplace listing, an Instagram post, and your store should all come from the original shoot, not from each other. Every generation costs quality, and the cost is invisible until a customer zooms in.

Pick your bestselling product and run its photos through the checklist today: one product, one preset pass, one DevTools check. If the collection page feels faster on your phone afterward, work through the rest of the catalog in batches. The Shopify image optimizer preset keeps the settings consistent across the whole catalog, so the tenth product gets the same treatment as the first.