Compressing and Resizing Images for the Web

Resize first, compress second

The single biggest win is almost always dimensions, not quality. File size scales with pixel count, so halving both width and height removes roughly three quarters of the data before any compression is applied. If an image is never displayed larger than 800 pixels wide, storing it at 4000 is paying four to five times over for pixels nobody sees.

Do it in that order. Compressing a huge image and then scaling it down in the browser wastes the bandwidth you were trying to save, and scaling down after heavy compression tends to make artefacts more visible rather than less. Decide the largest size the image will actually be shown at, resize to that, and only then think about quality.

Choosing a format

JPEG is for photographs. It throws away detail the eye is bad at noticing, which works beautifully on gradients and skin tones and badly on sharp edges. PNG is lossless and keeps every pixel exactly, which makes it right for screenshots, logos, line art and anything needing transparency — and wrong for photos, where it produces files several times larger than necessary.

WebP covers both cases and is typically 25–35% smaller than an equivalent JPEG at similar visual quality, with transparency support PNG-style. Browser support has been universal for years, so for most sites the honest answer is: use WebP, and keep the original as a fallback only if you must support something ancient.

What the quality slider actually does

Quality is not a percentage of anything meaningful — it is a knob controlling how aggressively detail is discarded, and the scale is not linear. The interesting range is narrow: between about 75 and 85 most photographs are indistinguishable from the original at normal viewing size, while the file is a fraction of what quality 100 produces. Above 90 you are mostly buying bytes, not visible quality.

The right way to choose is to look, not to guess. Export at a couple of settings and compare them at the size the image will actually be displayed, not zoomed in. Artefacts that are obvious at 400% magnification are frequently invisible in place, and judging at the wrong zoom level is the most common reason people ship images two or three times larger than they need to be.

Recompressing is not free

Lossy formats degrade every time they are re-encoded. Opening a JPEG, making a small edit and saving it again discards detail a second time, and the losses accumulate — the familiar blocky, smeared look of an image that has been through several rounds. This is why you keep an original at full quality and export derivatives from it, rather than editing the exported copy.

It also means a file that is already small may not compress meaningfully further. If an image has been through a compressor once, running it through again often trades visible quality for a handful of kilobytes. Check what you actually gained before accepting the result.

Strip what you are not using

Photographs carry metadata you rarely want to publish: camera model, settings, timestamps and, on phones, frequently the GPS coordinates of where the picture was taken. That is both weight and a privacy problem, and it survives being copied between apps.

A short checklist before publishing:

• Resize to the largest size the image will actually be displayed at.
• Prefer WebP for photos; keep PNG for screenshots, logos and transparency.
• Try quality 75–85 and compare at display size, not zoomed in.
• Export derivatives from the original, never from an already-compressed copy.
• Strip EXIF metadata — especially location — from anything going public.