Resize images in bulk

Getting image dimensions right

Resizing is the single highest-leverage thing you can do to an image. Everything else — format choice, quality tuning — is fine-tuning by comparison.

Why pixels matter more than quality

An image's pixel count grows with the square of its linear dimensions. Halve the width and height and you remove three quarters of the pixels. That is why a 4000 × 3000 photo resized to 1200 × 900 will usually shrink far more than the same photo recompressed at its original size — and it will look better on screen, because the browser is no longer throwing away detail to fit it into the box.

Pick a target from the display size

Work backwards from where the image will actually appear. A hero banner displayed 1600 pixels wide does not need to be 5000 pixels wide. A thumbnail shown at 300 pixels does not need to be 1200.

One wrinkle: high-density screens. A 2× display wants twice the pixels to look sharp. Multiply your CSS layout width by the device pixel ratio you want to support — 2× is a reasonable target, 3× is usually overkill and costs a lot of bytes.

Exact dimensions versus percentage

Exact dimensions are right when every image must land on the same grid — product listings, galleries, avatars. Percentage is right when the images differ in size but you want them all scaled by the same factor, preserving their relative proportions.

About "max width"

This tool treats the values as a maximum, not a target. An image smaller than your limit is left alone rather than being blown up — upscaling does not create detail, it only invents pixels and makes images look soft. If you genuinely need to upscale, do it deliberately and expect some blur.

Aspect ratio

Aspect ratio is always preserved. If you set only one dimension, the other is computed from the original proportions. If you set both, the image is fitted inside that box without cropping or distortion — so the result may be narrower than the width you asked for, if the height was the binding constraint.