Image Resizer
Resize images by pixels or percentage. Keep aspect ratio, runs locally.
How to use Image Resizer
- 1Pick a file
Drop or select an image.
- 2Choose dimensions
Enter width and height in pixels, or a percentage scale.
- 3Download
The resized image downloads in the original format.
About Image Resizer
Resizing an image — scaling a 4000px photo down to 1200px for a blog header, or fitting a portrait into a 256×256 avatar slot — has two parts: changing the dimensions, and re-encoding at the new size. A naive approach (just specifying width/height in HTML) makes the browser do the scaling at render time, which wastes bandwidth and may produce subtle aliasing artifacts. Pre-resizing solves both problems.
Utilify handles both parts: enter a target width and height, or use the percentage buttons for quick proportional scaling, and the image is redrawn through a canvas at the new dimensions — using high-quality resampling, which we switched on after measuring that the browser default aliases visibly at non-integer downscale ratios — then re-encoded in the same format as the input. PNG stays PNG, JPEG stays JPEG. All processing happens locally — even very large images stay private. The aspect-ratio lock is on by default to prevent accidentally distorting the picture, and the tool warns you when the target is larger than the original.
The difference between resizing and compressing is worth being clear about, because people often want one when they ask for the other. Resizing changes the pixel dimensions of the image; compressing changes how those pixels are encoded. Both reduce file size, but resizing is by far the bigger lever for the web: halving the width and height quarters the pixel count, which usually shrinks the file far more than any quality slider can. If your goal is a faster page, resize to the dimensions you will actually display first, then compress.
Downscaling — making an image smaller — is safe in terms of perceived quality: you are throwing away detail you were not going to show anyway. Upscaling is the opposite trap, and we measured how asymmetric it is: taking a 1,600px test photo down to 400px and stretching it back to 1,600px left every pixel a visible distance from the original (mean per-channel error of about 6 on the 0–255 scale) — and, tellingly, the stretched file compressed to less than a third the size of a true 1,600px encode, because blur is easy to compress. Big dimensions, soft picture. For genuine enlargement you need AI super-resolution tools, not a resizer; the honest rule is to start from the highest-resolution original you have and only ever scale down.
The aspect-ratio lock prevents the most common resizing mistake: entering a width and height that do not match the original proportions, which squashes or stretches the picture. With the lock on, changing one dimension updates the other automatically; turn it off only when you deliberately want to force exact dimensions and do not mind the distortion.
What width to resize to for the web
If you are preparing images for a responsive site, these are the widths worth generating — they match the default srcset breakpoints of Next.js, the framework this site runs on, so they reflect what production image pipelines actually request.
| Target use | Width to generate | Why |
|---|---|---|
| Thumbnails, avatars, icons | 96–384 px | Fixed-size UI slots; Next.js imageSizes defaults run 32–384 |
| Phone-width content images | 640–828 px | Covers typical phone viewports (390–428 CSS px) at 2× density |
| Tablet / laptop content, blog heroes | 1080–1200 px | The workhorse sizes for article and card layouts |
| Full-width desktop heroes | 1920–2048 px | Standard and QHD-class displays at full bleed |
| 4K full-bleed (rarely needed) | 3840 px | Only for edge-to-edge imagery on 4K screens — huge files, use sparingly |
The full Next.js default list is 640, 750, 828, 1080, 1200, 1920, 2048, and 3840 for viewport-width images plus 32–384 for fixed-size ones. If you resize to one target only, pick the largest width the image will actually be displayed at — in our 4,000px-camera-photo test, resizing to 1,200px cut the file to 15% of the original.
When to use Image Resizer
- Web image preparation
Resize a 4K product photo to 1200px wide before uploading so the browser does not scale at render time.
- Avatar/profile pictures
Crop and resize a portrait to the exact dimensions your platform requires.
- Print preparation
Scale source images to specific dimensions required by your print-on-demand service.
Resizing mistakes we measured with this tool's own pipeline
- Shrinking a little and getting a bigger file
Resizing a 4,000px camera JPEG down 10% per side (81% of the pixels remain) made the file 29% larger in our measurement. The reason: this tool re-encodes JPEG output at quality 92, which is more generous than the quality 80 or so a camera or phone typically used, and for small shrinks the re-encode outweighs the pixel loss. Resizing pays off when the reduction is substantial — the same photo at 1,200px came out at 15% of the original size. For gentle size trims, use the Image Compressor instead and leave the dimensions alone.
- Trusting big dimensions from an upscaled source
A 400px image stretched to 1,600px measured a mean per-channel error of about 6 versus a true 1,600px original — visible softness everywhere — while compressing to under a third of the true version's file size, since blur carries little information. Dimension metadata says 1,600px; the detail says 400. This is why the tool now warns when your target exceeds the original.
- Step-down resizing on the advice of old blog posts
The classic tip says to halve repeatedly instead of resizing in one jump, because browsers once used cheap 2-tap sampling. Measured today, it is backwards: one direct 4,000→1,200 resize landed closer to ground truth (mean error 2.4) than a three-step chain (3.5) — each intermediate step resamples and re-blurs. In a modern browser, resize once, directly to the target.
- Resizing in HTML instead of in the file
Setting width/height attributes on a 4,000px photo displayed at 1,200px still ships every one of the 9 million pixels to every visitor — in our test image's case, 1.3 MB where the properly resized version measured 192 KB. Browser-side scaling costs the bandwidth first and the layout only afterwards. Pre-resize to the displayed size, then let the HTML attributes prevent layout shift rather than do the scaling.
Frequently asked questions
Will the aspect ratio be preserved?+
Yes by default — changing one dimension updates the other automatically. Toggle the lock off only if you intend to stretch the image to exact dimensions.
Are images uploaded?+
No — everything runs locally in your browser using the Canvas API, so your images never leave your device.
Can I enlarge a small image without losing quality?+
Not really — and the tool warns you when you try. In our measurement, a 400px image stretched to 1,600px differed from a true 1,600px original by a mean per-channel error of about 6: soft everywhere, because interpolation cannot invent detail that was never captured. Always start from the highest-resolution original and scale down.
What is the difference between resizing and compressing?+
Resizing changes the pixel dimensions; compressing changes how the pixels are encoded. Resizing is the bigger lever for file size — halving width and height quarters the pixel count — but only for substantial reductions: small trims can backfire because of the re-encode (see the mistakes above).
Does it keep my original format?+
Yes. A PNG stays a PNG and a JPEG stays a JPEG, re-encoded at the new size — JPEG output uses quality 92, which preserves detail but is worth knowing about when you resize an already heavily compressed source.
Why did my image get blurrier after several edits?+
Each resize resamples the pixels and each JPEG save re-encodes them, and with resizing in the loop the loss compounds: in our test, eight resize-and-save rounds ended visibly blurrier than one direct resize to the same final size — and the file came out at half the size, because half the detail was gone. Keep the original, and resize once from it for each output you need.
Related tools
Compress JPG, PNG, and WebP images directly in your browser. Tune quality, see savings instantly.
Convert PNG images to WebP for smaller files and faster pages. Adjustable quality, runs locally.
Convert JPG images to PNG in your browser. Pixel-exact output, transparency-ready, and the size increase is shown before you download.