Image Resizer

What this tool is used for

• Resizing an image to the exact dimensions an upload or a design spec demands.
• Shrinking an oversized screenshot before attaching it to a ticket.
• Producing a set of consistent thumbnails from mixed-size sources.
• Reducing a photo's dimensions to bring its file size within a limit.
• Scaling an asset for a layout without opening an image editor.

Frequently Asked Questions

Which resampling algorithm is used?

Browsers use a bilinear or bicubic filter via canvas. The distinction matters: nearest-neighbour keeps hard edges and suits pixel art, bicubic smooths and suits photos, and Lanczos preserves the most detail when downscaling.

Can upscaling recover detail?

No. Enlarging interpolates between existing pixels — it invents plausible values but adds no information. AI upscalers hallucinate detail that looks convincing and is not necessarily what was there.

Why does downscaling in one step look worse?

Because a large reduction skips source pixels entirely, causing aliasing. Stepping down in stages, or using a filter with a wide enough kernel, samples more of the original and produces a noticeably cleaner result.

How do I keep the aspect ratio?

Set one dimension and derive the other. Setting both independently stretches the image — and for photographs a distortion of even a few percent is visible on faces, though not always consciously.

What size should web images be?

Match the largest rendered size times the device pixel ratio, then serve variants with srcset. Shipping a 4000px image into a 400px slot wastes bandwidth and is one of the most common real-world performance faults.

Should an image be sharpened after downscaling?

Usually yes — resampling averages neighbouring pixels, which softens edges. A light unsharp mask after the resize restores the perceived detail, which is why photo pipelines resize then sharpen rather than the reverse.

What is the difference between resizing and resampling?

Resizing can just change the stated dimensions or DPI without touching pixels; resampling actually recomputes them. Only the second changes file size or quality, which is why changing DPI alone does nothing for the web.

How do I serve the right size to each device?

With `srcset` and `sizes`, letting the browser pick from several widths based on the viewport and pixel ratio. Serving one large image and scaling it in CSS wastes the bytes on every small screen.

Common errors and gotchas

• Upscaling and expecting detail to appear. Enlarging invents pixels rather than recovering them.
• Unlocking the aspect ratio by accident, which stretches faces and straight lines visibly.
• Resizing a lossy image and re-saving it, which adds another generation of artefacts.
• Ignoring device pixel ratio, so an image sized for CSS pixels looks soft on a high-density display.
• Resizing after cropping when the target size was fixed, which throws away detail you then upscale.