Product Image Dimensions for E-Commerce

Recommended product image sizes across Shopify, WooCommerce, BigCommerce, and Magento — plus the aspect ratio rules, zoom requirements, and file size targets that apply to every platform.

Want to check what dimensions your store is actually shipping?

Run a free scan →

Looking for sizes for other elements? See our full image size reference.

Quick Answer

2048×2048 pixels at 1:1, JPG quality 85, 200–500 KB. This single specification works across every major e-commerce platform, supports zoom view at retina density, and grids cleanly. Square aspect ratio is what every platform expects and what gives consistent, professional grid layouts.

The rest of this guide covers per-platform details (where the platforms diverge), zoom-specific requirements, and the conventions around aspect ratio that make a store look professional rather than improvised.

Per-Platform Recommended Sizes

PlatformRecommended UploadAspect RatioNotes
Shopify2048×20481:1Max 4472×4472 supported. Auto-resizes to grid widths.
WooCommerce2000×20001:1Configurable per theme; check WP Customizer settings.
BigCommerce2048×20481:1Max upload 8 MB. Stencil themes serve WebP automatically.
Magento (Adobe Commerce)1500×15001:1Configurable in admin. Catalog needs CDN for zoom performance.
Squarespace Commerce2000×20001:1Pixel Geometry handles resize variants automatically.
Wix Stores2000×20001:1Max upload 25 MB but practical ceiling is far lower.

Why 2048×2048 Specifically

Three reasons 2048 has become the de facto standard for product images:

  • Zoom view needs roughly 1500–2000 pixels. Most product zoom implementations show a 2× or 3× crop of the source. 2048 gives the zoom crop enough pixels to look crisp on retina displays without being so large that load time suffers.
  • It downscales cleanly. 2048 → 1024 → 512 → 256 → 128 are all power-of-two reductions, which browsers handle without sub-pixel artifacts. Compare to a 1500-pixel source where the 750 grid view is fine but the 600-pixel mobile variant is lossy.
  • Most platforms cap pre-2048 ranges. Shopify, BigCommerce, and Squarespace all generate srcset variants up to roughly 2000 pixels and don't serve larger versions even if you upload 4K. Going above 2048 wastes upload bandwidth without changing what visitors actually receive.

Zoom View Requirements

Zoom is what drives the upload-size requirement up. Without zoom, 1000-pixel images would be more than enough for grid and detail rendering. With zoom, the source needs to support a 2–3× crop without visible blur.

The math: if a product detail page renders the main image at 600 pixels and the zoom shows a 3× crop, the zoom area effectively requires 1800 pixels at 1:1. On a retina display, that doubles to 3600 pixels — but no platform actually serves at 3600 because file size becomes unworkable. The compromise is 2048: enough for sharp zoom on most displays, modest enough that file size stays reasonable.

For categories where zoom isn't valuable (digital downloads, services, bulk commodities), drop to 1500 pixels and save the file weight.

Aspect Ratio: Pick One and Stick With It

The single biggest visual difference between a polished store and an amateur store is aspect ratio consistency. Mixing 1:1, 4:3, 3:2, and 4:5 product photos creates a grid that visibly stutters — cards of different heights, uneven gaps, awkward thumbnails.

The fix is mechanical: pick one ratio and crop every product photo to match before upload. The defaults that work:

  • 1:1 (square) — universal safe choice, works for nearly every category. Default for Shopify, BigCommerce, Squarespace, Wix.
  • 4:5 (portrait) — common in fashion and apparel where vertical subjects benefit from extra height. Looks good on mobile (portrait phones).
  • 3:4 (portrait) — similar to 4:5 but slightly less tall. Used by some apparel brands for a more compact grid.
  • 3:2 (landscape) — works for landscape subjects (cars, furniture in context, food on plates). Less common because grids feel wide.

What you do not do: ship a store with 1:1 product hero shots and random 4:3 lifestyle shots in the same gallery. Crop the lifestyle shots to match the hero ratio, even if it means losing some context.

File Size and Compression

A single product page can request 5–15 product images simultaneously (main + gallery + zoom variants). Multiply 500 KB per image by 10 and the page is 5 MB before fonts, CSS, JavaScript, or the rest of the layout. That's a problem on slow connections and a measurable hit to Core Web Vitals.

File size targets:

  • Hero / first image (zoom-supporting): 200–500 KB
  • Gallery images (non-zoom): 100–300 KB
  • Total product page image weight: under 3 MB
  • Lifestyle / context shots: 200–400 KB (more compression-tolerant than studio shots since fine detail matters less)

Aggressive compression (quality 75–80) is usually invisible at grid display size and saves 30–50% over quality 90. Quality 65 starts showing visible artifacts on textured surfaces and is too aggressive for most product photography.

Format: JPG, WebP, or PNG?

JPG is the universal default. Every platform serves it natively, every browser displays it, and quality 85 is virtually indistinguishable from quality 100 at roughly half the file size.

WebP is better — 25–35% smaller than JPG at the same visual quality, with an additional ~20% reduction available with AVIF. Whether you can serve WebP depends on your platform:

  • Shopify: serves WebP automatically to supporting browsers
  • WooCommerce: needs a plugin (ShortPixel, Imagify) or a CDN
  • BigCommerce Stencil: serves WebP automatically
  • Magento: needs an extension or CDN
  • Squarespace: serves WebP automatically on 7.1

PNG is wrong for product photographs — 3–5× larger files than JPG with no visible quality benefit. The exception: products that need transparency (logos, icons, cutouts on transparent backgrounds for compositing into other layouts).

See exactly which images on your store are oversized or undersized.

Scan a URL →

Common Mistakes

  • Mixed aspect ratios across products. The most common amateur tell. Crop everything to a single ratio before upload, no exceptions.
  • Lifestyle shot as the grid thumbnail. The grid thumbnail should be a clean studio shot — that's what shoppers expect when scanning. Lifestyle shots belong as image #2 onward, not as the lead.
  • Uploading 4000+ pixel sources. Every major platform downscales to roughly 2000 pixels for serving. Going larger wastes upload bandwidth and storage. 2048 is the practical ceiling.
  • Neglecting alt text. Product alt text feeds image search, accessibility, and AI-driven visual search. Format: "[product name] in [color] [view type]" — e.g., "leather messenger bag in tan, three-quarter view".
  • Inconsistent backgrounds. Some products on white, some on grey, some on lifestyle. The grid looks unprofessional. Pick a background and apply universally.
  • Forgetting mobile. Most e-commerce traffic is mobile. Preview the product page on a phone — does the hero image fill the screen cleanly? Are gallery thumbnails tap-friendly? If the page only looks good on desktop, that's a real conversion problem.
  • Poor lighting on transparent backgrounds. If you cut out products on white, the lighting needs to be even or the cutout shows shadows that conflict with the background. Use diffused lighting and clean cutouts, or commit to consistent soft shadows across all products.

Tools That Help

E-commerce stores tend to accumulate product images quickly — a 200-product catalog with 5 images per product is 1000 images, plus variants, plus retina sources. Manual optimization stops scaling around image #100. Automated optimization is the move.

Affiliate disclosure: Some links below are affiliate links. If you sign up for a paid plan we may earn a commission at no extra cost to you. We only recommend tools we have evaluated. Full disclosure.

TinyIMG (Shopify)

Built specifically for Shopify stores. Compresses uploaded product images automatically, generates alt text suggestions, and handles WebP delivery via the Shopify CDN. Useful if you're running on Shopify and want set-and-forget optimization across your catalog.

Try TinyIMG

ShortPixel (Universal)

Works across WooCommerce, Magento, Wix, BigCommerce, and standalone. WordPress plugin for WooCommerce, web-based bulk compressor for everything else. Handles WebP/AVIF conversion and serves via their CDN if your platform doesn't support modern formats natively.

Try ShortPixel

Bunny.net (CDN)

For high-traffic stores where the platform's built-in CDN starts feeling slow internationally. Bunny offers per-URL image transformations — resize, format, quality — handled at the edge. Useful for global stores with customers in regions where the platform's default CDN has weak coverage.

Visit Bunny.net

Frequently Asked Questions

What size should product images be for e-commerce?

2048×2048 pixels at 1:1 aspect ratio is the safe default across Shopify, WooCommerce, BigCommerce, and Magento. This size supports zoom view (which requires roughly 1500–2000 pixels for a clean experience), grid display, mobile rendering, and retina densities. JPG quality 85, file size 200–500 KB after compression. Square aspect ratio is what every platform expects by default and avoids the visual chaos of mixed ratios in product grids.

Why do product images need to be square?

Every major e-commerce platform builds its product grid around a fixed aspect ratio assumption — usually 1:1. Mixing 1:1, 4:3, and 3:2 product photos in the same store produces visibly broken grids: some cards taller than others, awkward whitespace, uneven thumbnails. Square is the safest because it works with portrait subjects (apparel, bottles), landscape subjects (cars, furniture in context), and small object photography equally. If you have a strong visual reason to use 4:5 or 3:4 (typical for fashion), pick one ratio and apply it universally.

How big should product images be in file size?

Target 200–500 KB per image after compression. A 2048×2048 JPG at quality 85 is typically 250–400 KB, which is a reasonable trade-off between visual fidelity and page weight. Larger product galleries (10+ images per product) can compound quickly — multiply 400 KB by 12 images and the product page is shipping nearly 5 MB before the rest of the page loads. Aggressive compression (quality 75) is usually invisible at grid display size.

What format should product images be?

JPG is the universal safe choice. WebP is better but support depends on your platform — Shopify and WooCommerce serve WebP automatically, BigCommerce does too on Stencil themes, Magento only with extensions or a CDN. PNG is wrong for product photographs (3-5x larger files with no visible quality benefit). The exception: PNG is correct for product images that need transparency, like logos, icons, or product cutouts on transparent backgrounds.

Do product images need to support zoom?

Yes for most categories. Apparel, jewelry, hardware, and any product where customers want to inspect texture, fabric weave, or fine details all benefit from zoom. The zoom view is what forces the upload size up to 2000+ pixels — you need that many pixels available for the zoomed crop to look sharp. For categories where zoom matters less (consumables, bulk items, abstract digital products) you can save weight at 1500 pixels.

How many images should each product have?

Three to seven is the practical range. One front view (the grid hero), two to three angles or scale shots, one in-use or contextual photo, optional detail crops. Beyond seven, conversion data from Shopify and BigCommerce shows diminishing returns — visitors stop scrolling. Fewer than three feels sparse and reduces purchase confidence, especially for higher-priced items.

Should I use lifestyle shots or studio shots?

Both, in that order. The first image (the grid thumbnail) should be a clean studio shot on a neutral background — that's what shoppers expect when scanning a category page, and consistent backgrounds make the grid feel professional. Subsequent images can be lifestyle, scale, in-use, or detail shots. Studios first, lifestyles second is the convention because it optimizes the recognition pass while still conveying scale and context once a shopper engages.

Related Guides

Last updated: