Shopify & WooCommerce Product Image Size: The Complete Guide

"What size should my product images be?" doesn't have one universal answer, but it does have a small number of correct answers depending on where the image is used. Getting this wrong in either direction costs you: too small and images look soft when customers zoom in; too large and your collection pages load slowly, which costs you both conversions and search ranking.

The dimensions that actually matter

Product detail / zoomable image: 1600–2048px on the long edge. Shopify's own upload guidance tops out around 2048×2048px; going meaningfully larger just adds file weight without a visible quality gain on the vast majority of screens.

Collection / grid thumbnails: These are almost always displayed much smaller than the source file — often 300–600px wide — but themes commonly serve the same full-size image and let the browser scale it down, which is wasteful. If your theme supports responsive image variants (most modern Shopify and WooCommerce themes do), you don't need to manually create separate thumbnail files; the platform generates them from your uploaded original.

Aspect ratio: Square (1:1) is the safe default. It's what Etsy, Amazon and Google Shopping's product feed all expect, and it's what most theme grids are built around. If you shoot products in a non-square ratio (common for apparel on a model), plan on padding to square with a consistent background color for anywhere that requires it — that's exactly what "fit to square canvas" does in the Bulk WebP Converter.

File size targets

As a practical budget:

• Collection/grid images: under 200 KB after compression.
• Product detail images: under 400 KB, even for zoomable high-resolution shots.
• Hero/banner images: under 300 KB — these are often the single biggest Core Web Vitals offender on a homepage.

If you're consistently over these numbers after compressing, the fix is almost always the pixel dimensions, not the quality slider. A 4000px-wide photo at 60% JPEG quality is still bigger — and often looks worse — than the same photo resized to 1600px at 85% quality.

Format: WebP vs JPEG vs PNG

WebP is the right default for photographic product images today. It typically runs 25–50% smaller than JPEG at matching visual quality, and it also supports transparency, so you don't need to fall back to PNG for images with a transparent or semi-transparent background. Browser support is no longer a real concern — Chrome, Edge, Firefox and Safari (14+) all handle it natively, and a WebAssembly fallback covers the rare exception.

PNG still makes sense for graphics with sharp edges and flat color (logos, icons, size charts) — not for photography.

JPEG is the format most sellers are stuck on by default because it's what their camera or phone exports. It's not wrong, just heavier than it needs to be for the same visual result.

How this connects to page speed and SEO

Google's Core Web Vitals measure Largest Contentful Paint (LCP) — often the hero image or the first product image above the fold — and page speed is a documented, if modest, ranking factor. On a collection page with 24–48 product thumbnails, the cumulative weight of oversized images is one of the most common causes of a slow LCP score, and it's one of the more mechanically fixable ones: resize, re-encode, done.

Fixing an existing catalog in bulk

Going through hundreds of existing product images one at a time in Photoshop isn't a realistic fix for an established catalog. Our step-by-step guide covers batch-converting an entire catalog to WebP — resized, renamed and zipped in one pass — using the Bulk WebP Converter, which runs entirely in your browser so nothing gets uploaded to a third-party server in the process.