Resizing Images for the Web: Dimensions, Retina, and the DPI Myth

Resizing an image for the web sounds trivial, and it mostly is, except for one stubborn myth about DPI that sends people chasing a number that does nothing on a screen. Clear that up and sizing images becomes simple: match the pixels to where the image will be shown, with a little extra for sharp displays. Resize any image with the Image Resizer, in your browser.

The only number that matters on screen: pixels

A digital image is a grid of pixels, and its real size is its pixel dimensions, for example 1600 by 1200. On a screen, that is the whole story. A browser lays out an image according to how many pixels it has (and any CSS sizing you apply), and nothing else in the file changes that. When you resize for the web, what you are changing is the pixel dimensions, and the goal is to make them match the space the image will occupy.

The DPI myth

Here is the part that trips everyone up. Images can carry a DPI (or PPI) number in their metadata, and you have probably been told to use "300 DPI for web." That advice is meaningless on a screen. Browsers ignore the DPI field entirely; a 1600 by 1200 photo displays exactly the same whether its metadata says 72 DPI or 300 DPI, because only the pixel count is used. Changing the DPI number without changing the pixels changes nothing you can see online.

Sizing for high-density (Retina) displays

Modern phones and laptops pack two or more physical pixels into each CSS pixel, which is what makes their screens look so sharp. To stay crisp on them, an image needs more pixels than its on-page size suggests. If a photo is displayed in a slot 400 pixels wide, supply it at around 800 pixels so a 2x display has the detail to fill in. This, not a DPI number, is what "high resolution" actually means for the web.

Downscaling is free quality; upscaling is not

Making an image smaller is the good direction. The tool throws away pixels you did not need, the file shrinks, and the result looks identical at its new size. Making an image larger is the bad direction: there is no hidden detail to recover, so the tool can only guess at new pixels by interpolation, which looks soft or blocky. Always start from an image at least as large as you need and scale down. If you only have a small image, no resizer can truly sharpen it back up.

One more habit: keep the aspect ratio. Resizing width and height independently stretches faces and logos in a way that is instantly noticeable. Lock the proportions and set just one dimension, letting the other follow.

Resize, then compress

Resizing and compression work together: shrink the dimensions first to cut the bulk of the weight, then compress what remains to squeeze out the rest, saving it in a modern web image format. The Image Resizer changes an image's pixel dimensions in your browser with no upload, and the Image Compressor handles the second step. For the underlying behaviour of high-density displays, MDN's guide to responsive images covers srcset in practical detail.