Image resizer
What Image resizer actually does
Every one-click resizer makes a decision on your behalf and does not tell you which one. Ask for 300 by 300 from a landscape photograph and the tool either fits the whole picture inside the box and leaves the shape alone, or fills the box and throws away the sides, or pads the gap with a color, or squashes the picture out of shape. Those are four different pictures, and the difference is the whole job. This page makes the rule the first control: contain never crops and never distorts, cover fills the box and crops to an anchor you choose, pad fits the picture and fills the rest with a color or with transparency, stretch takes the exact box and accepts the distortion. Whichever one is chosen, the exact before and after geometry is printed under the result. The second thing worth saying is what the pixels go through. Scaling on a canvas is whatever the browser feels like: the standard names bilinear, bicubic and Lanczos as examples and then declines to require any of them, so the same image resized in two browsers can come out visibly different. This page does not use canvas scaling. It runs the same Lanczos resample the command line tool runs, ported from the reference implementation, and the two agree pixel for pixel on a PNG. Nothing is uploaded; the image is decoded, resampled and encoded in the tab.
How to use it
- Drop one image or a folder of them. Each file is decoded in this tab and nothing is sent anywhere.
- Pick the fit rule first, then the width and the height. Contain accepts one dimension on its own; cover, pad and stretch need both, because they produce an exact canvas.
- Set the crop anchor when the rule is cover, or the pad color when the rule is pad. Pad accepts a color name, a hex value, or the word transparent for a PNG or WebP output.
- Look at the result on the stage and switch to the original to compare. The readout gives the exact source and output size and the format that will be written.
- Download the one you are looking at, or run the whole batch and take a zip. A file that cannot be decoded fails on its own row and the rest still finish.
Useful for
- Produce an exact set of thumbnails for a catalog or a store, where every tile has to be the same size and the crop has to favor the top of the picture.
- Fit a tall photograph into a landscape slot without cropping anyone out of it, by padding to the frame in a background color that matches the page.
- Prepare a batch for upload against a hard pixel limit, where a resizer that quietly crops would break the layout.
- Match the output of a command line run for the same folder, when part of a pipeline runs on a machine and part of it runs in a browser.
Limits worth knowing
- PNG output is bit for bit identical to the command line tool. JPEG and WebP are written by the browser's own encoder, so the pixels agree and the compressed bytes do not.
- An image is capped at 80 megapixels here, because the resample holds four bands plus an output in memory. Past that the page refuses and says so rather than failing partway.
- Above four megapixels the stage is drawn from a reduced copy for speed and the readout says so. The download is always made at full size.
- A named pad color is parsed by the browser's color parser, which is not the same list the command line tool uses. A hex value means the same thing in both.
- Upscaling is refused unless it is asked for, and a width on its own still leaves the height as its own bound, so a picture is never enlarged by accident.
Questions people ask
What is the difference between contain and cover?
Contain fits the whole picture inside the box you gave and keeps its shape, so the output is usually smaller than the box on one axis. Cover fills the box exactly and crops whatever hangs over, at the anchor you choose.
Why does my image come back the same size?
Contain never enlarges unless upscaling is turned on, and a width on its own leaves the height as its own bound. Give both dimensions, or allow upscaling.
Will this match what my script produces?
For PNG, yes, pixel for pixel: both run the same Lanczos resample. For JPEG and WebP the pixels match and the encoded file differs, because the encoder is the browser's.
Does anything get uploaded?
No. The file is read, resampled and written in this tab.