thecompressjpeg

How to compress product images for an online store

Product photography has to survive being zoomed into, which pulls against every instinct about page speed. Here is where the balance actually sits.

The targets

Main product image
1500–2048 px on the longest edge, quality 80–85.
Zoom
Roughly 2× the largest displayed size. More than that is wasted.
Gallery thumbnails
300–500 px, quality 75.
Category listing
600–800 px, quality 78.
Format
WebP with a JPEG fallback. PNG only for transparent cut-outs.
Rule
Only the first image needs to load immediately. Lazy-load the rest.

Setting up a product page

  1. Step 1: Decide the largest size the image is ever displayed at

    Measure the zoom view, not the thumbnail. That number, doubled for high-density screens, is your master dimension — anything beyond it is bytes nobody can see.

  2. Step 2: Produce one master per product at 1500–2048 px

    Quality 80–85 keeps fabric texture, grain and stitching legible under zoom. This is the one image where being slightly generous is justified, because customers genuinely inspect it.

  3. Step 3: Generate the smaller sizes from it

    Thumbnails, gallery strips and category tiles all come from the master rather than being separate exports. Most platforms do this automatically once you upload a sensible original.

  4. Step 4: Load the first image eagerly, everything else lazily

    The main product image is almost always the Largest Contentful Paint element, so it must not be lazy-loaded. Every other gallery image should be, because most visitors never scroll to them.

Details worth knowing

Zoom is the one genuine reason to keep resolution

Most advice about web images assumes nobody looks closely. Product photography is the exception: customers zoom in to check the weave of a fabric, the finish on a metal, the stitching on a seam. That is a real commercial function, and stripping the resolution that supports it costs conversions in a way page speed will not show you.

The discipline is to be generous with exactly one image per product and ruthless with all the others. A single 250 KB master and eight 20 KB thumbnails is a fast page. Eight 250 KB images is not.

What is worth zooming, and what is not

Texture rewards resolution: fabric, wood grain, leather, brushed metal, print detail. These are also the products where returns are driven by "it did not look like this online".

Flat, uniform surfaces do not. A plain moulded plastic case looks identical at 1200 pixels and at 3000, because there is no fine detail to resolve. Match the resolution to whether the product actually has texture worth inspecting.

Formats for product photography

WebP
The default. Typically 25–35% below JPEG at matched quality, supported by every current browser.
JPEG
The fallback, and what you send to marketplaces and feeds that reject WebP.
PNG
Only for cut-outs with genuine transparency. Never for a photograph on a white background — that is a JPEG.
AVIF
Worth it if your pipeline can produce three formats. Otherwise WebP captures most of the gain.

The white-background PNG is the most common and most expensive mistake in ecommerce imagery. A white background is not transparency, and the file is often ten times what it needs to be.

The consistency problem

A single quality setting across a catalogue produces inconsistent file sizes, because a textured knitwear shot legitimately needs more bytes than a plain ceramic mug. That is usually correct behaviour — each image gets what it needs.

Where consistency matters more, use a target size instead of a quality value: every image is searched independently to the same limit, so the sizes come out even at the cost of slightly uneven quality. Which you want depends on whether your constraint is bandwidth or appearance.

Do not forget the feeds

Product images are not only used on your own site. Shopping feeds, marketplaces and social catalogues all have their own dimension minimums and format rules, and several still reject WebP.

Keep a JPEG master at a generous size for feeds, and generate the optimised web derivatives from it. Optimising so aggressively that your feed images fail validation is an expensive way to save bandwidth.

Do it here instead

These run in your browser on any device, so nothing is uploaded and there is nothing to install.

  • Bulk compressor

    One setting across a whole folder, processed in parallel, downloaded as a ZIP.

    Open the tool

  • JPG to WebP

    Typically 25–35% smaller at matched quality. The standard web win.

    Open the tool

  • Resize image

    By pixels or percentage, aspect ratio locked, across a whole batch.

    Open the tool

  • Compress to 200KB

    Full resolution kept, quality still invisible to the eye.

    Open the tool

Questions

Frequently asked questions

Every answer below is present in the page source, expanded, so it can be read without opening anything.

What size should product images be?

1500–2048 pixels on the longest edge for the main image, which supports zoom on a high-density screen. Thumbnails need 300–500 px and category tiles 600–800 px. Generate the smaller sizes from the master rather than exporting each separately.

Does compressing product images hurt sales?

Over-compressing can, if customers cannot see the detail they are trying to judge — texture, finish and stitching are exactly what drives returns when they are misjudged. Quality 80–85 on the main image preserves all of that while still being a fraction of a camera original.

Should product images be PNG?

Only for genuine cut-outs with transparency. A photograph on a white background is not transparent, and saving it as PNG typically produces a file ten times larger than the JPEG or WebP equivalent for no benefit. It is the most common expensive mistake in ecommerce imagery.

How many images should a product page have?

As many as the product needs — but only the first should load immediately. Lazy-load the rest, since most visitors never scroll through the whole gallery, and never lazy-load the main image because it is almost certainly your Largest Contentful Paint element.

Should I use WebP for products?

For your own site, yes — it is 25–35% smaller at matched quality with universal browser support. Keep JPEG masters as well, because shopping feeds and marketplaces frequently reject WebP.

How do I keep file sizes consistent across a catalogue?

Use a target size rather than a quality value. Each image is then searched independently to the same limit, so the sizes come out even. The trade is slightly uneven quality, since a detailed product legitimately needs more bytes than a plain one.

From the blog

Related reading

More background from the blog.

  • Practical Guides

    How to Compress Images for a Website Without Wrecking Them

    Resize before you compress. Measured on one photograph: half the width at quality 80 produced a 16.4 KB file, while full width at quality 40 produced 20.6 KB and looked far worse. The order of operations matters more than the settings.

    8 min read

  • Image Formats

    WebP vs JPEG: Which Should You Use, and When JPEG Still Wins

    WebP produced a 27.0 KB file against MozJPEG's 41.1 KB on the same photograph at slightly higher measured fidelity — 34% smaller. It also produced a larger file than JPEG on random noise. The advantage is real and content-dependent.

    9 min read

  • Image Compression

    JPEG Quality Settings Explained: What the Number Actually Means

    Quality 80 is not 80% of anything. It is an index into a quantisation table. Measured on one photograph: dropping from 100 to 90 removes 77% of the file and 4.2 dB of fidelity; dropping from 40 to 30 removes 17% and costs almost as much.

    8 min read