How to Compress Images for the Web Without Visible Quality Loss

The two ways to make an image smaller

Re-encoding takes the existing pixels and stores them more efficiently. For JPEG, the "quality" setting (typically 60-85 for web use) controls how aggressively the encoder discards detail the eye is least likely to notice. At quality 80, most photos look indistinguishable from the original at normal viewing size while the file can be 3-5x smaller.

Resampling changes the pixel count: a 4000 x 3000 photo shown inside a 800 px-wide layout column carries 4-5x more pixels than the layout can ever display. Downsampling to the display size is usually the single biggest win available - and it is invisible, because no one can see pixels the layout never shows.

The safe order is always resample first, then re-encode. Downsample a 4000 px photo to 1200 px, then save at JPEG quality 80, and a 4 MB photo becomes a 150-250 KB file that looks identical in its real destination.

JPEG, PNG, WebP: which format for what

The format decides what "compression" is allowed to do:

• JPEG: lossy, great for photos, bad for sharp edges and flat colors (it rings around them). The default for camera photos and product photography.
• PNG: lossless, great for screenshots, diagrams, logos and anything with transparency. Files are larger; "PNG compression" means smaller lossless storage, not a quality dial.
• WebP: supports both lossy and lossless, usually 20-30% smaller than JPEG at equal quality, now supported by all major browsers. The default choice when you control the hosting.
• SVG: for vector graphics (logos, icons) - resolution-independent, so "compression" means simplifying the paths, not pixels.

A repeatable compression workflow

The same four steps every time, roughly two minutes:

1. 1Find the real display size. Check where the image will actually be shown (a content column is often 700-1000 px wide; for retina displays, allow 2x).
2. 2Downsample to that size (plus a small margin) rather than leaving 4000 px in a 800 px slot.
3. 3Re-encode at a moderate quality - 80 for JPEG is the standard starting point. Go lower only if the file is still too heavy; go higher only if you see artifacts.
4. 4Inspect at 100% zoom around faces, fine texture and high-contrast edges. If it passes there, it passes everywhere else.

Keep the original file - the compressed version is a working copy for one destination. The same photo may later need a different size for a different layout, and re-compressing an already-compressed JPEG stacks generation loss on generation loss.

The mistakes that actually show

Invisible compression is the norm; visible compression almost always has a specific cause:

• Quality set too low (below ~60 for JPEG) on photos with fine detail - hair, foliage and fabric are where it shows first.
• Compressing a screenshot or diagram as JPEG - flat colors and sharp text are the worst case for JPEG. Use PNG or WebP lossless instead.
• Repeated compression cycles: compressing, exporting, re-compressing. Each cycle degrades slightly; work from the original every time.
• Oversized images scaled up by the browser: a small image stretched big is soft regardless of compression - upsample or get a better source.

Frequently asked questions