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 holds six million pixels whether its metadata claims 72 DPI or 300 DPI.

DPI is a printing instruction in a metadata field. It tells a printer how many pixels to place per inch, which sets the printed size — 3000 pixels at 300 DPI is a 10-inch print, and at 72 DPI a 41-inch print of the same pixels.

So "save at 72 DPI for the web" does not shrink a file. Reducing pixel dimensions does. For A4 at 300 DPI, supply about 2480 × 3508 pixels.

The quality number is not a percentage. It is an index into quantization tables that control how aggressively detail is discarded, and its relationship to file size is steep and non-linear.

• 95–100 — near-original, often only 20–35% smaller. Rarely worth it.
• 80–90 — photography you care about. 50–70% smaller, no artifact at normal viewing distance.
• 70–80 — ordinary web images. Usually 70–85% smaller.
• 50–70 — visible softening in smooth areas; thumbnails survive it.
• Below 50 — blocking, ringing and color banding. Placeholders only.

Returns diminish fast at the top: 100 to 90 usually halves the file for no perceptible change, 90 to 80 saves far less. If you remember one number, use 80.

JPEG has no alpha channel and cannot store transparency. Converting a transparent PNG forces those pixels to become something, and most tools fill them with black — which is why a logo exported to JPEG arrives in an unwanted dark box. Keep it as PNG, use WebP (alpha support, typically 25–35% smaller than PNG), or flatten onto a chosen background deliberately.

Color is the other gap. Screens mix additively in RGB; printing presses mix subtractively in CMYK, and converting between them always approximates. A CMYK JPEG is converted to RGB before a browser can display it, and saturated cyans and deep blues can shift noticeably. Compress and resize in RGB for screens, and keep a separate CMYK master for print.

Every time a JPEG is decoded, edited and saved, the encoder re-runs quantization on data already quantized. Errors from the previous pass are treated as real detail and collect new errors on top. This is generation loss, and it only accumulates.

Re-saving at quality 90 restores nothing; it spends more bytes preserving the earlier pass's artifacts. Compress from the highest-quality original you have, and settle on one output size in a single pass rather than nudging quality down and re-saving.