Image Resizer

Resizing an image sounds like a single operation, but it actually involves a choice most people never think about explicitly: what happens to every pixel of the source image when the output has a different number of pixels than the input. A resize is really a resampling operation — the browser has to calculate a brand new grid of pixel values from the old grid, and the quality of that calculation depends entirely on the resampling algorithm used. The HTML5 canvas element, which this tool is built on, handles this automatically through its `drawImage()` method: when you draw a source image into a destination rectangle of a different size, the browser applies bilinear (or, on most modern browsers, a higher-quality bicubic-like) interpolation to blend neighbouring source pixels into each destination pixel, rather than simply duplicating or discarding pixels outright. This is what makes a resized photo look smooth rather than blocky. There are two fundamentally different directions a resize can go, and they behave very differently. Downscaling — making an image smaller, say from 4000×3000 down to 1200×900 — is the easier, more forgiving direction: many source pixels are being averaged down into fewer destination pixels, so detail is lost but the result still looks sharp and clean, because there was more information available than the output needs. Upscaling — making an image larger than its original dimensions — is the harder direction: the browser has to invent pixel values that were never actually captured by a camera or a sensor, by interpolating between existing pixels. No amount of clever interpolation can recover detail that simply isn't in the source data, so an upscaled image will always look softer, blurrier, or more artificial than a photo actually captured at that resolution — this is a fundamental limit of resizing, not a bug or a limitation specific to this tool. This tool allows upscaling because there are legitimate reasons to do it (matching a required output size for a form, a print template, or a platform upload requirement), but it's worth setting expectations: quality genuinely degrades in that direction, and there's no setting or algorithm that avoids it. Keeping the aspect ratio locked while resizing is the safest default for almost any image containing real photographic content, because deliberately changing the width-to-height ratio stretches or squashes every object in the frame — faces get wider or narrower, circles become ovals, buildings tilt in ways that look obviously wrong to a viewer. There are legitimate reasons to unlock it anyway: fitting an image into a fixed banner or thumbnail slot with an unusual aspect ratio, or deliberately creating a stretched effect for design purposes. This tool supports both: lock it for safe, proportional resizing, or unlock it to type in any width and height combination directly. Because everything happens on an HTML canvas element running JavaScript directly in your browser, no image data is ever transmitted anywhere. The file you choose is read locally with the FileReader API, drawn onto an in-page canvas, and the resized result is only ever written to disk when you explicitly click download — there is no upload step at any point in the process.