resize image
The height follows the width, so nothing gets squashed.
The height follows, so nothing is squashed. Enlarging is not offered: it invents detail that was never in the file.
The short answer
Give a width and the height follows, so nothing is stretched. A 1200 × 900 copy of a 4000 × 3000 photograph is about a tenth of the pixels and looks identical on a screen, because a screen never had four thousand pixels of width to show it in.
Most photographs on most pages are several times larger than the space they are shown in. This scales one down to a width you choose, in your own browser.
The formula
new height = new width ÷ old width × old height
Worked examples
- 4000 × 3000 to 1200 wide
- 1200 × 900
- 3000 × 4000 to 1200 wide
- 1200 × 1600
- 600 × 400 asked for 1200
- left at 600 × 400
Reference table
| Width | What it is for | A 4:3 photo becomes |
|---|---|---|
| 2400 | Retina full-width hero | 2400 × 1800 |
| 1200 | Full-width on most pages | 1200 × 900 |
| 800 | In-article image | 800 × 600 |
| 400 | Thumbnail, card | 400 × 300 |
| 150 | Avatar | 150 × 113 |
How to use it
- 01Drop the image inOr pick a file. It is decoded locally; nothing is uploaded.
- 02Type a widthThe height follows automatically. Common widths are in the table below.
- 03Save the PNGThe panel shows the old and new dimensions and both file sizes.
Also searched for
Searches that land here include resize image, image resizer, change image size, resize photo online and reduce image dimensions.
Sizing an image for the web
Pixels you cannot see are pure cost
A phone camera produces something like 4000 pixels across. A blog post is rarely more than 800 wide. Serving the original means sending twenty-five times the pixels the reader will ever see, which they pay for in data and in waiting. Resizing is the single largest saving available on most pages, ahead of any choice of format.
Double it, and stop
High-density screens show two device pixels for each CSS pixel, so an image displayed 800 wide wants a 1600-pixel file to look sharp. Three times is imperceptible on all but the largest displays and costs another 125 per cent in area. Two is the number.
Resizing is not compression
Scaling changes how many pixels there are; compression changes how many bytes describe them. They are separate levers and it is worth pulling them one at a time: resize first, because a smaller picture is cheaper to compress, then choose a format and a quality for the result.
Questions people ask
What width should I use?
Match the space it will be shown in, then double it for high-density screens. A full-width image on a page that is 800 pixels wide wants 1600. An avatar shown at 48 pixels wants 96. Anything beyond that is bytes nobody sees.
Why will it not enlarge an image?
Because enlarging invents pixels that were never captured. Every upscaler is guessing, and the guesses look soft or, with the machine-learning ones, confidently wrong. If you need more detail, the answer is a bigger original, not a bigger file.
Why does it save as PNG?
So that resizing does not quietly recompress the picture as well. Two changes at once make it impossible to tell which one caused a problem. If you want it smaller in bytes too, run the result through the JPEG or WebP tool afterwards.