Resize images without uploading them

Almost every image on the web is larger than it needs to be, usually because it came off a camera or a phone at full resolution and went straight into a page. The picture looks the same and the page is several times heavier, which costs the visitor on a phone rather than the person who uploaded it.

The rule that fixes most of it is unglamorous: an image should be roughly the size it is displayed at, or twice that for high density screens, and no more. A photograph shown in a 600 pixel column does not need to be 4,000 pixels wide. Serving it at 1,200 is generous and typically an order of magnitude smaller than the original.

Dimensions are the first lever and the one people skip, because compression gets all the attention. Halving the dimensions of an image quarters the pixel count, and no amount of clever compression on a needlessly large file beats resizing it first. The right order is resize, then compress, then look at whether it still reads well.

It is worth resizing rather than letting the browser do it with CSS. Constraining a large image with a width attribute makes it look right and still downloads every byte, which is the version of this problem that hides best, because the page looks fine to whoever built it on a fast connection.

One thing to keep in mind for anything going onto a page: the perceived quality of a photograph on a screen depends far more on it being sharp at the size shown than on its absolute resolution. A well resized 1,200 pixel image looks better than a 4,000 pixel one squeezed by the browser, and loads in a fraction of the time.

Everything happens in your browser. Photographs are personal data more often than people think, particularly ones with faces in, and there is no need for them to travel anywhere to be made smaller.