Image Resizer
Set exact image dimensions for social posts, documentation, product images, and web layouts while optionally preserving the aspect ratio.
- Lock aspect ratio unless you intentionally need a crop-style stretch.
- Resize to the largest size you actually display, not the camera original.
- Compress after resizing when preparing web assets.
Supports PNG, JPG, JPEG, and WebP. Processing happens entirely in your browser, so your image files are never uploaded or stored.
Resize to the size you actually show
Camera originals and design exports are often thousands of pixels wider than the layout needs. Serving those bytes forces browsers to download and decode work that never appears on screen.
Pick the largest display width you need (and density if you ship 2x assets), keep aspect ratio locked unless you mean to distort, then compress. Pair with the converter when the destination format should change too.
Sizing for retina without shipping the camera original
On a phone or a 4K monitor one CSS pixel is often two or three device pixels, so an image 800 CSS pixels wide may need a 1600px file to look sharp. That is the whole reason a retina strategy exists — and it is not a reason to ship the 6000px export. The rule is display width times the highest density you actually support, and nothing beyond it.
If you only ever set one width, size for the density you expect most often. If you use srcset, generate the two or three widths you list and no more: every extra entry is another file to keep in sync with the design, and another place for a stale asset to hide.
Resizing without wrecking the picture
Downscaling throws pixels away, which is the safe direction. Upscaling invents them, so a wider source that was never there becomes a soft blur rather than extra detail — if a file is already smaller than the target, go back to the original export instead of resizing up.
Keep the aspect ratio locked unless a crop is genuinely what you want, because a stretched image is the one mistake a viewer notices instantly. And resize before compressing, never after: compressing unused resolution only makes a smaller copy of a file that was too large to begin with.
Aspect ratio, crop, and letterboxing
When a target is a fixed rectangle — a social card, a thumbnail, a store listing — three things can happen, and only one is usually right. Preserving the ratio and shrinking to fit leaves empty space (letterboxing). Preserving the ratio and cropping to fill removes content from the edges. Stretching to fill distorts the picture.
Choose by what the image is: a product shot can usually be cropped, a screenshot full of text should be letterboxed or padded, and almost nothing should be stretched. When you need an exact box, resize to cover it and then crop toward the subject rather than letting a single resize stretch the file.
What interpolation does when you resize
A resize asks the browser to compute a pixel for every position in the new grid. Downscaling averages neighbouring pixels, which is why shrinking is safe. Upscaling has less to work with — it estimates from the pixels that already exist, so a 2× enlargement is soft and a 4× enlargement is visibly mush. No resize adds real detail; only a larger source or a dedicated upscaler can.
For a large reduction, a single big downscale can look slightly aliased because the filter samples a wide area. Most browsers use a decent filter and the difference is minor at typical ratios; if a photo still looks harsh after shrinking, a small blur before the downscale is a known fix — but it is never a substitute for starting from a sharper original.
Frequently asked questions
Should I resize or compress first?
Resize first when the source is larger than the display size. Then compress. Compressing unused resolution still leaves an oversized file.
Are resized images uploaded?
No. Resizing runs locally in your browser.
Why does my resized image look blurry?
Usually because it was enlarged. Upscaling estimates pixels that were never captured, so it softens. Shrinking from a larger source stays sharp; growing a small image does not.
Does resizing up add detail?
No. Enlarging can only interpolate between existing pixels, so it adds file size, not information. Go back to the original export if you need a bigger, sharper image.