Resize Image

An image has one intrinsic size: its width and height in pixels. Everything else — inches, centimetres, DPI — is an instruction about how to print it, stored in metadata, and has no effect on how it appears on a display.

A browser draws an image at whatever CSS size the layout specifies, scaling the file up or down on the fly. If the file is bigger than the space it is drawn into, the extra pixels are downsampled at display time and thrown away every single page load, having already cost the visitor the bandwidth to download them. That is the waste resizing eliminates.

A digital image has exactly one physical property: its pixel dimensions. A 3000 × 2000 photograph contains six million pixels whether its metadata claims 72 DPI or 300 DPI.

DPI is a printing instruction stored in a metadata field. It tells a printer how many of those pixels to place per inch of paper, which determines the printed size — 3000 pixels at 300 DPI is a 10-inch-wide print; the same file at 72 DPI is a 41-inch-wide print of the same six million pixels. Changing the number changes nothing about the file except a handful of bytes in a header.

So "save this at 72 DPI for the web" does not make a file smaller. Reducing pixel dimensions does. If a print shop asks for 300 DPI at A4, what they actually need is about 2480 × 3508 pixels; supply that many pixels and the DPI tag can be corrected in seconds.

The quality number in a JPEG or WebP encoder is not a percentage of anything. It is an index into a set of quantisation tables that control how aggressively detail is discarded. The relationship to file size is steep and non-linear.

For a typical 12-megapixel phone photograph the curve looks roughly like this:

• Quality 95–100 — near-original appearance, but the file is often only 20–35% smaller. Rarely worth it for the web.
• Quality 80–90 — the sweet spot for photography you care about. Typically 50–70% smaller with no artefact you would notice at normal viewing distance.
• Quality 70–80 — the sweet spot for ordinary web images. Usually 70–85% smaller. Artefacts appear only if you zoom in on flat sky or skin.
• Quality 50–70 — visible softening and blocking in smooth areas, though thumbnails and background images survive it well.
• Below 50 — obvious blocking, ringing and colour banding. Useful only for placeholders.

Diminishing returns set in fast at the top of the range. Going from quality 100 to quality 90 usually halves the file for no perceptible change; going from 90 to 80 saves far less and costs slightly more. If you only remember one number, use 80.

JPEG has no alpha channel. It cannot store transparency in any form. When a transparent PNG is converted to JPEG the transparent pixels have to become something, and most tools silently fill them with black — which is why a logo exported to JPEG so often arrives with an unwanted dark box around it.

If your image has transparency you have three sensible options: keep it as PNG, use WebP (which supports alpha and is typically 25–35% smaller than PNG for the same image), or flatten it onto a known background colour deliberately rather than letting an encoder choose for you.

PNG's own compression is lossless and works best on images with few distinct colours and large uniform regions. A screenshot of a text document compresses beautifully. A photograph saved as PNG does not, because virtually every pixel differs from its neighbour and there is no redundancy for the algorithm to exploit.

Every time a JPEG is decoded, edited and saved again, the encoder re-runs its quantisation step on data that has already been quantised once. Errors from the previous pass are treated as real detail and get their own new errors layered on top. This is called generation loss, and it accumulates in one direction only.

Saving an already-compressed JPEG at quality 90 does not restore anything — it just spends more bytes preserving the artefacts of the earlier pass. Saving repeatedly at a low quality is what produces the smeared, blotchy look of an image that has been through a dozen chat apps.

Two habits avoid it. First, always compress from the highest-quality original you have, not from a copy that has already been through a compressor. Second, decide on your output size once and do a single pass, rather than nudging the quality down repeatedly and re-saving each time. If you need to try several settings, run each of them against the original file.