Resize an image

What this does

Makes an image smaller — or, if you insist, larger — without it leaving your computer. The size, the format and the JPEG quality are all yours to choose, and the proportions are kept unless you explicitly ask for them not to be.

Resizing sounds like it should be one line of arithmetic, and the arithmetic is in fact one line. The parts that go wrong are elsewhere: which dimensions to compute when a photo carries an EXIF rotation, how to reduce by a factor of ten without the browser’s resampler smearing the detail, what to do with transparency when the output format has none, and what to call the file so that it cannot overwrite the only copy that still has the pixels in it.

The method

Both sides are multiplied by one factor. Computing a width and a height separately, and rounding each, is how a 3:2 photograph comes out at 1.4999:1 — imperceptible on a screen and immediately visible when it is placed next to another one. In the box mode that factor is the smaller of the two the box allows, so the image fits inside rather than overflowing one edge. Only the exact-size mode uses two factors, and it does so because it has been told to.

The reduction is done in stages. A browser’s drawImage resamples with a small kernel, so asking it to go from 4000 pixels wide to 400 in one step reads about one input pixel in ten and discards the other nine: fine detail turns into aliasing and text shimmers. Halving repeatedly means every output pixel is the average of exactly four inputs, which is what a proper box filter would do. The ladder stops while both sides are still more than double the target, so the last draw is always a reduction of less than 2x — the size a small kernel handles correctly.

The EXIF orientation is asked for explicitly rather than left to the engine. A phone writes a landscape sensor image plus a tag saying “turn this a quarter turn”, and whether the decoder honours that tag by default has changed over the life of the specification and still differs between engines. Stating it means a portrait photo is 3000 by 4000 in every browser, not 4000 by 3000 in one of them and squashed in the output.

The size and the format are read out of the file’s own header before anything is decoded. That is what allows a 300-megapixel panorama to be refused with a sentence rather than by the tab running out of memory half way through, and it is why the message for a HEIC says HEIC instead of “unsupported file”.

Before you read on

A 4000 by 3000 photograph is fitted inside a 1200 by 1200 box. How many times is it actually drawn?

• AOnce — straight to 1200 by 900.

  That is the four-line version, and it is why so many resized photographs shimmer.

• BTwice.

  Yes: halved to 2000 by 1500, then one final draw of 1.67x.

• CFive — halved until it cannot be halved again.

  The ladder stops while both sides are still more than double the target, so the last draw does the remainder.

Twice — halved to 2000 by 1500, then a final 1.67x draw to 1200 by 900. A browser's drawImage resamples with a small kernel, so asking it to go from 4000 wide to 400 in one step reads about one input pixel in ten and discards the other nine: fine detail turns into aliasing and text shimmers. Halving means every output pixel is the average of exactly four inputs, which is what a proper box filter does, and stopping the ladder while both sides are still over double the target keeps the last draw under 2x — the size a small kernel handles correctly.

1. factor = min(1200 / 4000, 1200 / 3000)

   The box gives two limits. Both sides get multiplied by one of them, never by their own.

2.        = min(0.30, 0.40) = 0.30

   The smaller, so the image fits inside the box rather than overflowing an edge. Here the height limit never bites, because the photograph is wider than it is tall.

3. width  = round(4000 x 0.30) = 1200

   Computing a width and a height separately, and rounding each, is how a 3:2 photograph comes out at 1.4999:1.

4. height = round(3000 x 0.30) =  900

   Imperceptible on its own, and immediately visible the moment it is placed next to another photograph.

A worked example

A 4000 by 3000 photograph, fitted inside a 1200 by 1200 box, with everything else left at its default:

factor = min(1200 / 4000, 1200 / 3000)
       = min(0.30, 0.40)
       = 0.30

width  = round(4000 x 0.30) = 1200
height = round(3000 x 0.30) =  900

The height limit never bites, because the photograph is wider than it is tall. It is drawn in two stages rather than one:

Stage	Size	Reduction from the stage before
Decoded	4,000 × 3,000	—
Halved	2,000 × 1,500	2.00x
Final	1,200 × 900	1.67x

and offered as photo-1200x900.png. These exact figures — the two stages, the final size and the filename — are asserted in this tool’s test file, so if the formula ever changes without this page changing with it, the build fails.

No file size is published here on purpose. The bytes that come out depend on the browser’s PNG and JPEG encoders, which differ between engines and between versions, and a number quoted on this page would be wrong for most readers.

What it does not do

It does not crop, rotate, or pad. Every mode scales the whole image; the exact-size mode changes the proportions by stretching rather than by cutting anything off. It does not target a file size — you choose the pixels and the JPEG quality, and the bytes are whatever the encoder produces. It reads PNG, JPEG, WebP and GIF, and writes PNG and JPEG, which leaves out HEIC, AVIF, TIFF, SVG and raw camera formats. It takes one file at a time. And it keeps only the first frame of anything animated.

It also will not change format for you. Converting PNG to JPEG is a separate decision with its own trade-off, and making it after the resize is the order that produces the smaller file.