By Dik Raci · Creator of online tools · About the author

Image Compression for E-Commerce: Faster Product Pages, More Sales

On an online store, images are the product. They are also, on the overwhelming majority of product pages we inspect, the single heaviest thing the browser has to download - typically the largest share of total page weight. That combination makes image compression the highest-leverage performance work a store owner can do: no framework migration, no infrastructure project, just lighter files delivering the same visual result. Google's own research found that the probability of a mobile visitor bouncing increases by roughly a third as load time goes from one to three seconds, and marketplace studies keep converging on the same conclusion - faster product pages convert better.

This guide is a practical workflow, not a lecture. It tells you what to upload, at what size, in which format, and what "done" looks like. Everything runs on files you already have, and the whole audit at the end takes about thirty minutes.

Start by naming the image roles on a product page

Almost every e-commerce page uses the same five image roles, and each one has a different job. Treating them identically - uploading one huge photo and letting CSS shrink it - is the number-one reason store pages are slow. A product card thumbnail rendered at 150 pixels wide does not need the same file as the zoom view at 1600 pixels.

The point of these budgets is not precision - it is having a number to compare against. When your main product photo weighs 1.8 MB, you do not need a debate; you need a compressor.

Pick the format before you pick the quality

For photographic product shots, WebP is the safe default in 2026 and AVIF is the aggressive option - both beat JPEG by a wide margin at comparable quality, and every modern browser understands them. Serve the modern format with a JPEG fallback using the <picture> element and old browsers simply never notice. Keep PNG for logos and screenshots with flat colors or transparency, and reach for lossless formats only when pixel-exact reproduction genuinely matters - which, on a store, is rarer than people think. If you want the measured version of this comparison rather than rules of thumb, our lab test JPEG vs WebP vs AVIF: real numbers encodes the same photographs in all three formats and publishes every file size.

One warning about quality settings: product images carry detail that matters commercially - fabric texture, stitching, watch faces, food. That is why the sweet spot for store photography sits higher than for decorative web imagery. Use our JPEG quality 75 vs 85 vs 95 measurements as a reference point, then eyeball your own hero shots at the chosen setting before you commit. Faces and fine text are where aggressive compression shows first; gradients in backgrounds are where it hides.

Delivery: the settings that cost nothing

Compression alone is half the win. The other half is telling the browser how to load each image, and the defaults are usually wrong in expensive ways.

• •Lazy-load everything below the fold: add loading="lazy" to thumbnails, gallery images, reviews and recommendations - but never to the main product photo, which is usually the Largest Contentful Paint element. Lazy-loading the hero is one of the classic ways stores accidentally slow themselves down.
• •Size images with srcset: a phone at 390 pixels wide should not download a 1600-pixel file. Responsive srcset attributes let the browser pick, and typically cut mobile image weight by half or more.
• •Priority hints on the hero: fetchpriority="high" on the main product photo tells the browser to start downloading it immediately instead of after the JavaScript has parsed.
• •Always set width and height: explicit dimensions prevent layout shift while images load, which protects your CLS score and stops the "add to cart" button from jumping away from thumbs.

A 30-minute audit you can run today

You do not need a performance consultant to find the worst offenders. Run your five best-selling product pages through PageSpeed Insights and note the "properly size images" and "serve images in next-gen formats" opportunities. Then take the actual files those pages reference - the URLs are listed right in the report - and compress them. For most catalogs built over years, the audit finds hero images at 1-3 MB that become 120 KB files with no visible difference at normal viewing size.

The workflow we recommend: download the oversized files, run them through a batch pass with our batch compression tool, spot-check the results at full zoom, and re-upload. Then re-run PageSpeed and compare. Stores that have never done this typically see product-page image weight drop by 60-80% in one afternoon, and the improvement shows up immediately in the field data Google collects. For the broader checklist that goes beyond images - caching, fonts, third-party scripts - our complete image optimization guide picks up where this one stops.

Finally, make it a process, not a one-off. Decide that no product image goes live above 200 KB, and compress before upload rather than after. Whatever platform you run - Shopify, WooCommerce, a custom build - the upload-time habit is what keeps the speed you just won, and the image SEO guide covers the alt-text and naming side of the same habit.