Product Photo Optimization for Shopify, WooCommerce, and BigCommerce

Product photography is the most expensive image optimization you’ll ever do. The photos are irreplaceable once shot, the customer decides to buy or leave based on how they look, and the page has to load fast enough that the customer doesn’t bounce before seeing them. Miss any of those three and you’re leaving money on the table.

I’ve worked with dozens of independent merchants on image setups across Shopify, WooCommerce, and BigCommerce. The platforms handle images very differently, and the defaults on each one are rarely the best choice. This guide covers what actually works.

The universal targets

Regardless of platform, the 2026 target for an e-commerce product photo is:

• Main product image: 1600–2400 px on the long side, WebP format, quality 80 (or AVIF at quality 60 if the platform supports it).
• Gallery / additional images: 1200 px, WebP quality 80.
• Thumbnails: 400–600 px, WebP quality 75, or JPEG quality 80 for compatibility.
• Zoom image (if you use a zoom widget): 3000–4000 px, high quality. This file can be 500 KB+ because it only loads on hover/click.

The typical product page should weigh under 2 MB for all images combined, excluding the zoom variants. Anything heavier measurably hurts conversion on mobile.

Shopify

Shopify auto-handles a lot of image work for you, which is both a blessing and a gotcha. The built-in behavior:

• On upload, Shopify stores the original plus generated sizes (16×16 up to 2048×2048).
• Product pages serve responsive images via srcset.
• Shopify’s CDN auto-converts to WebP for supported browsers.
• File-size cap per image: 20 MB.

Shopify-specific recommendations

1. Upload at 2048×2048 px or larger. Shopify’s CDN won’t upscale, so anything smaller misses the retina rendering on high-density screens.
2. Use JPEG as the source format. Shopify auto-converts to WebP on delivery, so uploading WebP gains nothing and sometimes causes color-profile hiccups.
3. Before upload, pre-compress at quality 90. Shopify’s CDN respects your source — a quality-90 JPEG gets served at roughly 200–300 KB after WebP conversion, whereas a quality-100 JPEG ends up 400–600 KB with no visible improvement.
4. Strip EXIF before upload for privacy and slightly smaller files.
5. Avoid the theme’s “lazy loading all images” option if it lazy-loads the main product image. That image is usually your LCP. Make sure your theme loads the first product image eagerly.

Common Shopify pitfalls

• Apps that add additional image processing on top of Shopify’s built-in CDN, doubling the compression work.
• Themes that load all gallery thumbnails eagerly instead of lazy-loading below-the-fold.
• Uploading PNG screenshots for product images that should be JPEG photographs.

WooCommerce

WooCommerce (as a WordPress plugin) inherits WordPress’s image handling. That gives you flexibility and also a lot more rope.

WooCommerce-specific recommendations

1. Install a focused image optimization plugin. Modern Image Formats, EWWW Image Optimizer, or ShortPixel. These handle WebP conversion and resize on upload.
2. Set WooCommerce’s image sizes deliberately. Product images have three sizes (main, thumbnail, catalog). Configure them to match your theme at WooCommerce → Settings → Products → Display.
3. Upload at 2000 px wide minimum. WordPress will generate all the smaller variants.
4. Use a CDN. Cloudflare (even the free tier) in front of WooCommerce removes a huge amount of load from your host and accelerates image delivery globally.
5. Enable lazy loading via the standard WordPress 5.5+ native support. Don’t install third-party lazy-load plugins that add JavaScript overhead.

Common WooCommerce pitfalls

• Too many generated image sizes. WooCommerce, WordPress core, and many themes each add their own. Audit wp-content/uploads occasionally; you’ll often find 6–8 variants per upload, most of them unused.
• Theme builders (Elementor, Divi) rendering images as CSS backgrounds, which skips native lazy-loading and responsive image selection.
• Not setting width and height on custom image blocks, causing layout shift.

BigCommerce

BigCommerce sits in the middle: more automated than WooCommerce, less opinionated than Shopify. The image system:

• Optimized CDN with automatic WebP for supported browsers.
• Resize service that generates images on demand at any dimension.
• Built-in support for product image zoom.

BigCommerce-specific recommendations

1. Upload at 2048×2048 px. BigCommerce’s resize service handles everything smaller.
2. Use the Stencil theme’s image responsive attributes. Modern BigCommerce themes have correct responsive image setup out of the box; older custom themes often don’t.
3. Set the store’s default image quality in theme settings. 85 is a good balance.
4. Turn on the zoom feature if your products benefit. It serves a high-res variant on hover without loading it on page render.

Common BigCommerce pitfalls

• Uploading variants at the exact required sizes, which misses the CDN’s retina handling.
• Linking to external CDN URLs for product images instead of using the built-in CDN.

Photography basics that affect optimization

A few photography-side notes, because no amount of optimization fixes a bad source image:

Shoot at consistent exposure

Photos that vary in brightness or color balance between shots look inconsistent in a gallery. Use manual mode or consistent presets.

White backgrounds compress well

Pure white backgrounds (#FFFFFF) compress exceptionally well in both JPEG and WebP. They also give you flexibility later — placing white-bg products on a colored listing page is trivial; doing the reverse isn’t.

Sharp focus on the product, soft falloff on the background

This is aesthetic advice but also practical: crisp detail against a gradient compresses cleanly. Detail against busy detail blows up your file sizes.

Shoot at 1.5–2× your largest display dimension

If your largest display is a 2400-pixel hero, shoot at 4000+ pixels. You need headroom for crops, zoom features, and future larger displays.

Format: when to break the “always WebP” rule

WebP is the default for e-commerce. There are two exceptions:

1. Products with transparency rendered on varied backgrounds. You want PNG (or WebP lossless) so the alpha channel stays clean.
2. Hero photography for brand pages where visual quality is the entire point. Some luxury brands still ship JPEG at quality 90 for hero imagery, with WebP as a progressive enhancement via <picture>.

For 95% of product imagery, WebP at quality 80 is the right call and the platforms will serve it correctly.

Speed, conversion, and the math

Google’s retail-focused research and our own A/B testing both show the same pattern: every second of additional LCP on a product page costs roughly 3–8% of conversion. Image optimization is usually the largest single lever on LCP for e-commerce.

For a typical independent merchant:

• Before optimization: 4–6 MB product pages, 4+ second LCP, bounce rate 55–65% on mobile.
• After optimization: 1.5–2 MB pages, 1.5–2 second LCP, bounce rate 35–45%.

The math works out to roughly 10–20% more revenue for most stores once the optimization lands and Google re-crawls the catalog.

The workflow I actually recommend

For a client launching a new product line:

1. Shoot at maximum resolution, minimal compression (RAW or high-quality JPEG out of camera).
2. Edit in Lightroom or Capture One with consistent presets.
3. Export at 2048 px long edge, JPEG quality 90, strip EXIF, sRGB color profile.
4. Run through our JPG compressor at quality 90 to squeeze out another 10–20% size.
5. Upload to the e-commerce platform.
6. Let the platform’s CDN handle WebP conversion and responsive sizing.
7. Verify with PageSpeed Insights that LCP is under 2.5 seconds on mobile.

For stores that run their own WordPress/WooCommerce and need to generate WebP themselves, step 5 becomes: run through our PNG-to-WebP converter at quality 80 and upload the WebP directly.

What not to bother with

A few things that seem like they should help but don’t:

• “AI enhancement” plugins that upscale low-res product photos. The output looks fine at thumbnail size and obviously wrong at zoom. Shoot at the right resolution instead.
• Image-compression services that charge per-image. Modern CDN-level WebP is free on most platforms.
• Custom lazy-load JavaScript when native loading="lazy" does the same thing with zero JS overhead.

The bottom line

E-commerce image optimization is less about tricks and more about a consistent pipeline:

• Shoot at 2× the display size.
• Export clean JPEG at quality 90.
• Strip EXIF.
• Upload to your platform at full size and let its CDN do WebP conversion and responsive delivery.
• Check LCP on mobile with PageSpeed Insights.

For the export step, our JPG compressor squeezes files without uploading them anywhere. If your platform doesn’t auto-convert to WebP, our PNG-to-WebP converter handles it in-browser.