Resize first, compress second

The size of an image file is driven mainly by its pixel count, and pixel count grows with the square of the dimensions. A photo at 3000 × 2000 holds 6,000,000 pixels; the same photo at 1200 × 800 holds 960,000 — 6.25 times fewer. Reducing the dimensions is what actually shrinks a file, and the quality slider only decides how hard the codec compresses whatever is left.

People reach for the quality slider first because it is the visible control. It is the second step, and using it alone means throwing away detail in an image that is still far larger than anything will display.

How much data is in each size?

Pixel counts for the sizes that come up most often, and how they relate to a modern phone photo.

A phone photo resized to 1200 wide carries 8 per cent of the pixels it started with. No quality setting comes close to that, and the visible difference on a page where the image is displayed at 600 or 800 pixels is nothing.

What width should you actually target?

The largest size the image will ever be displayed at, multiplied by two for high-density screens, and no more. For a body image in an article that is 1,600 pixels; for a full-width hero, 1,920 or 2,400; for a thumbnail, 512.

The number to avoid is "the original". Uploading a 12-megapixel photo to display it at 600 pixels wide sends eleven twelfths of the file to be discarded by the browser, on every page view, on every device.

Which fit mode do you want?

Three modes, and they answer different questions.

• Fit inside. Scales down until the whole image is within the box, never crops, never enlarges past the box. The right default for a gallery.
• Fill. Crops to cover the box exactly. The right choice for a square avatar or a fixed-ratio card, and it will cut off edges.
• Stretch. Ignores the aspect ratio entirely. Almost never what you want, and it is there because occasionally it is.

Fit inside is also the safe choice when batch-processing images of mixed shapes, because it guarantees nothing is cropped without you seeing it.

Does it matter for anything other than page speed?

Yes, in two places people notice later. Email and upload limits are hit by original-size photos long before anything else, and a form that rejects a 12 MB attachment will accept the same picture at 1200 pixels without complaint. And on a metered or slow connection, an oversized image is a page that does not finish loading rather than a page that loads slowly.

There is also a storage argument on the receiving end. A team drive filling with 12-megapixel copies of images that are only ever viewed at 800 pixels is paying for the difference indefinitely.

Which format, and why did my PNG get bigger?

JPEG for photographs, PNG for flat graphics with sharp edges, WebP for either where support allows. PNG is lossless, so saving a photograph as PNG stores every pixel exactly and produces a file several times larger than the JPEG it came from.

The reverse error is just as common. Saving a screenshot or a logo as JPEG introduces compression artefacts around every hard edge, which is exactly the content JPEG handles worst — and it cannot store transparency at all.

WebP is smaller than both for most content at comparable quality and is supported by every current browser. The remaining reason not to use it is downstream software: some older desktop applications and some print workflows still will not open it.

What quality setting is right?

For JPEG, somewhere between 75 and 85 for photographs. Below 70 the artefacts become visible in smooth gradients — skies and skin are where they show first — and above 90 the file grows quickly for a difference nobody can see.

Quality is also not a percentage of anything. It is a codec parameter, and 82 on one encoder does not mean the same as 82 on another. Judge it by looking at the result rather than by the number.

One thing that is worth knowing: JPEG compression is lossy every time it runs. Opening a JPEG, resizing it and saving it again applies the loss twice. Where an original exists, always work from it rather than from a previously exported copy.

Questions people ask

Are my photos uploaded anywhere? No. The resizing happens on a canvas in your own browser, and the files never leave the device.

Does it strip EXIF data? Yes, as a consequence of how the image is redrawn. Location, camera model and timestamps do not survive, which is usually what you want before publishing a photo and is worth knowing if you needed them.

Why does the result look softer than the original? Because downscaling averages pixels together. A small amount of sharpening after resizing is standard practice in photo workflows for exactly this reason.

How many images can I do at once? Up to thirty in a batch. The work is done by your own device, so a large batch of large photos takes as long as your machine takes.

Set the dimensions to what will actually be displayed, then use quality to trim what remains. The image resizer does both in one pass, HEIC to JPG handles the format phones default to, and PNG to PDF is where the images go when they have to become a document.