Compressing product images: balancing sharpness and file size, and when to use JPEG, PNG or WebP

Nobody thinks about product image file sizes until something goes wrong: an upload fails for exceeding the size limit; a detail page loads so slowly on a phone that shoppers leave before the images appear; compressed benefit images come out with fuzzy, jagged text.

Compression looks technical, but it's really a series of trade-offs. Here are the key decisions for balancing sharpness and size.

Decision 1: dimensions before quality

The first instinct is to lower the quality setting. But pixel dimensions affect file size most. A 4000 × 4000 image at low quality can still be bigger than a 1500 × 1500 image at high quality — with no visible difference on a phone.

So first decide how big the image needs to be:

Archive the high-resolution original, but upload and display versions sized for the job.

Decision 2: format

Marketplaces usually specify accepted formats — mostly JPEG and PNG — and recompress for display. On pages you control, WebP makes a clear difference.

A common mistake: saving photos as PNG. Photographic content in PNG is often several times larger than JPEG with no visible gain. Use PNG only for transparency or flat graphics with crisp lines.

Decision 3: images with text

Benefit images, detail pages and banners with text are where compression goes wrong. JPEG produces ringing and blocks along high-contrast edges, and text edges show it most.

• Go easy on text areas — keep JPEG quality at around 80 or above (tools differ; judge by result);
• Try WebP — it usually handles text edges better than a JPEG of the same size;
• Don't use tiny type — small text blurs under any compression;
• Zoom in afterwards — check text edges and flat backgrounds for blocking at 100%.

Decision 4: colour space

Convert images to sRGB when saving. Images saved in Adobe RGB or other spaces can look dull or shifted in browsers and on phones. Most compression tools and export dialogs have the option.

Sharpen a little after resizing

Downsizing softens images slightly. Many tools sharpen automatically; if yours doesn't, add a light sharpen so edges and textures stay crisp. Too much creates white halos.

A batch workflow

1. Archive originals — camera files or high-resolution generated images, untouched;
2. Export by use — batch-export sizes per use: 1600px main images, 750px-wide detail images, 600px thumbnails;
3. Fixed settings — same format and quality for each use;
4. Spot-check — zoom into a few per batch, especially text and detail;
5. Name clearly — include size or use in file names to avoid uploading the wrong version.

Your own site and mini programs

On your own site, mini programs or campaign pages, images are usually the heaviest part of the page:

• Responsive images — serve smaller files to smaller screens;
• Lazy loading — load images below the fold when they're scrolled to;
• Prioritise the first screen — don't lazy-load the hero image, and compress it well; it decides how fast the page feels;
• CDN — serve images from a CDN with automatic format conversion if your provider supports it.

A common case: uploads that fail

When a detail page image fails to upload for being too large, check in this order: are the pixel dimensions far beyond what the platform needs (a design exported at 3000px wide, say)? Re-export at the required width. Is photographic content saved as PNG? Switch to JPEG. Only then lower quality. In that order, you rarely need to sacrifice sharpness.

When the original isn't sharp enough

Compression fixes "too big", but sometimes the problem is "not good enough": low resolution, noise, blur. Fix that first with HD upscale or Sharpen, then compress. Never the other way round — compressing first means the artefacts get enlarged too.

For large batches of white-background images, see white-background images for 200 SKUs.