Resizing an image online: dimensions, ratio and quality
Pick the right pixel dimensions, keep the aspect ratio and avoid a white block where your PNG transparency used to be.
“File too large: 2 MB maximum.” The form turns down your photo, which weighs 4.3 MB. Or the thumbnail on your article shows up squashed, because the template was expecting 16:9 and you handed it a square. In both cases the cause is the same: the number of pixels in the image doesn’t match the job it is being asked to do.
A 12-megapixel phone sensor puts out 4032 × 3024 pixels, which comes to 3–5 MB as a JPEG depending on how much detail there is in the scene. Shown in an article column 800 pixels wide, that image is scaled down by a factor of five by the browser: the visitor downloads twenty-five times more pixels than they will ever see. Resizing settles that question up front.
Resizing is neither cropping nor compressing
Three operations that get muddled together constantly, even though they act on different things.
- Resizing changes the number of pixels while keeping the whole scene. 4000 × 3000 becomes 800 × 600: same framing, same proportions, an image five times narrower.
- Cropping cuts out one area and throws the rest away. That is what you need when the problem is the shape: going from a 4:3 photo to a 3:1 banner without distorting faces means cutting, not stretching. That is the job of the Crop Image tool.
- Compressing keeps the dimensions and pushes up the JPEG or WebP compression level. You lose fine detail, not surface area.
In practice, cutting the dimensions slims a file down far more effectively than compressing it: the size of a JPEG roughly tracks its pixel count, so halving the width cuts the file by a factor of three or four. Always start there, and only move on to image compression if the result still overshoots the limit you have been given.
What dimensions to aim for
There is no universal “right size”, only a right size for a given use. A few solid reference points:
| Use | Dimensions |
|---|---|
| Profile picture, avatar | 400 × 400 px |
| Social sharing image (Open Graph) | 1200 × 630 px |
| Illustration inside an article | 1200 to 1600 px wide |
| Email attachment | 1024 px on the long edge |
| 6 × 4 in photo print at 300 dpi | 1800 × 1200 px |
A word on that last row, because “300 dpi” causes an enormous amount of confusion. It is not a setting you apply to a file: it is the relationship between the file’s pixels and the physical size of the print. A JPEG of 1800 × 1200 pixels printed at 6 × 4 in works out at 300 dpi; the same file stretched across an A4 sheet drops to around 150 dpi and starts to look visibly soft. Editing the resolution value written into the metadata does not add a single pixel. The pixel count is the only thing that counts.
The aspect ratio, and what happens when you break it
Unticking “keep proportions” amounts to stretching the image. On a logo or on text it is glaring; on a face it is more insidious but just as noticeable. Leave the box ticked by default: type in the width you want and let the height recalculate itself.
When the target imposes a ratio different from the source — a 4:3 photo (1.33) going into a 16:9 slot (1.78) — two honest strategies are left:
- Crop, then resize. Trim the top and the bottom first to land on 16:9, then scale down to the exact dimensions. The subject keeps its proportions.
- Resize, then let it be padded. Scale down keeping the ratio and let the template add bars down the sides. Handy when cutting would lose information: a floor plan, a chart, a scanned document.
One case comes up again and again: vertical phone photos, at 3024 × 4032. Forced to a fixed width, they end up extremely tall and take over the whole screen for a mobile reader. For those images, think in terms of a maximum height rather than a width.
Scaling down goes well, scaling up does not
Scaling down means throwing pixels away: the algorithm works out a weighted average of neighbouring pixels and the result is clean. Convertu’s Resize Image tool leans on the browser’s highest-quality resampling, which is more than enough for web use or paperwork.
Two caveats all the same.
- Extreme reductions in a single pass — 4000 px down to 200 px — can make fine detail shimmer: text, grids, patterned fabric, the rules in a table. Do it in two steps, say 4000 → 1000 → 200. Each pass averages a more reasonable neighbourhood and the final render is noticeably smoother.
- Scaling up invents nothing. Taking a logo from 300 px to 1200 px produces a blurry image, whatever method is used. If you need a large version, you have to go back to the original file or to a vector format (SVG, PDF, EPS). Upscaling can get you out of a hole when a form demands a minimum size; never for print.
The output format decides the rest
Resizing means re-encoding the image. The format you pick on the way out then weighs on the result as much as the dimensions themselves.
- JPEG — the right choice for photography. But it has no alpha channel: any transparent area in the original image gets filled in. A cut-out logo saved as PNG, resized to JPEG, comes back with a white rectangle around it. White is the fill used here, more usable than the black a canvas left to its own devices would hand you.
- PNG — lossless, keeps transparency, ideal for screenshots, logos and flat-colour graphics. On a photograph it produces a file five to ten times heavier than a JPEG of comparable quality.
- WebP — lighter than JPEG at equivalent quality, and it handles transparency. Read by every current browser, but still turned away by some desktop software and by some official upload forms.
The short rule: photo bound for the web → JPEG or WebP; transparency to preserve → PNG or WebP; unknown recipient or official submission → JPEG.
The traps that make the job fail
The file came off an iPhone
Since iOS 11, iPhones save in HEIC. That format is not read by browsers on Windows or on Android: the image simply will not open in the tool, with a message along the lines of “cannot read this image”. Convert it first with the HEIC to JPG converter, then resize the JPEG you get out. That conversion runs on our servers, unlike resizing: one free conversion a day without signing up, and the file is deleted after an hour.
The metadata disappears
Resizing re-encodes the image pixel by pixel: the output file no longer holds the original’s EXIF data — capture date, camera model, settings, and above all GPS coordinates. Excellent news before you publish a photo taken at home; bad news if you were counting on that information to sort your files. In the second case, keep the original alongside the reduced version.
The image is bigger than the browser can handle
The work happens on your own machine, with its own memory. Beyond roughly 40 million output pixels (8000 × 5000, for instance), the operation is refused with a clear message rather than handing back an empty image — that is the real behaviour of Safari and Chrome on very large canvases. In practice this only touches high-resolution scans and stitched panoramas.
An animated GIF loses its animation
An animated GIF put through a still-image resizer comes out frozen on its first frame. To keep the animation you need a tool built specifically for GIF.
Three checks before you publish
- The dimensions you ended up with really do match what was asked for. With the ratio locked, the second value may have shifted by a pixel or two through rounding: that is normal.
- The final file size comes in under the limit you were aiming at. If not, cut the width down further before you touch compression.
- The render viewed at 100%, not in a thumbnail. It is the only way to spot upscaling blur, a flat white block where the transparency used to be, or jagged edges on text.
Resizing itself happens without sending the file anywhere: this tool runs entirely in your browser and the image never leaves your device. Nothing to install, no upload — which changes everything when what you are handling is an ID document, a proof of address or a family photo. HEIC conversion does go through our servers: one free conversion a day without signing up, and files there are deleted after an hour.