Resize Image

Resize Image changes the pixel dimensions of a photograph, illustration or screenshot without altering its proportions. Whether you need a 1200-pixel-wide hero banner, a 300-pixel thumbnail, or a file scaled to sixty percent of its original size, this tool recalculates the canvas and redraws every pixel at the target size in a single step.

The tool accepts JPG, PNG, WebP, AVIF, GIF and BMP as input and lets you export the result as JPG, PNG or WebP. Because every calculation runs inside your browser through the Canvas API, the source file never travels to a server. You select the image, enter the dimension or percentage you want, and download a freshly encoded copy while the original stays exactly where it sits on your device.

An aspect ratio lock is engaged by default, which means entering only a width automatically computes the correct height so the image never stretches or compresses in an unexpected direction. You can unlock the ratio when a truly custom shape is required, but most users will keep the lock on and let the second dimension fall into place naturally.

File size is a direct function of pixel count multiplied by the per-pixel encoding cost. Downsizing a 6000-by-4000 photograph to 1500 by 1000 removes roughly fifteen sixteenths of the pixel data, so the resulting file is dramatically smaller even before quality settings come into play. When you also reduce the quality slider or switch to a more efficient format like WebP, the savings compound.

The 25 MB per-file limit is a browser-memory constraint rather than an arbitrary cap. Images above that size may fail to decode on the internal canvas. If your camera exports exceed 25 MB, compress or crop the source first and then bring the result into this tool for final sizing.

Batch consistency matters across a website. If blog headers, portfolio cards and product tiles are resized to different widths, layouts look uneven and the browser downloads redundant pixel data. Standardizing on a small set of widths - for example 1920 pixels for full-width heroes, 1200 pixels for content images and 600 pixels for card thumbnails - keeps the design coherent and the page weight predictable. Because you enter the exact width and the aspect lock preserves the ratio, reproducing the same number on every export is straightforward.

A workflow worth adopting is to resize once at output time and let the layout handle the display. Rather than uploading a raw 24-megapixel camera export and letting the browser scale it down on every page view, resize to the largest container the image will ever occupy and serve that file. The download is smaller, the server sends less data and mobile visitors wait less, while the rendered quality stays identical at the displayed size.

Downscaling reduces the pixel grid and discards information. A 4000-by-3000 photo resized to 1000 by 750 has far fewer pixels to store, so the download is smaller, the page renders faster, and the browser spends less memory compositing the element. The Canvas API applies a smoothing filter during the drawImage pass so edges stay clean at the smaller size.

Upscaling stretches the existing pixel data across a larger grid. No new detail can be created, so the result is inherently softer than a native capture at that resolution. The degree of visible softness depends on the scaling factor and the source quality: a modest 1.3x enlargement of a sharp photo is usually acceptable, while a 3x enlargement of a low-resolution thumbnail will look noticeably blurred.

In practice, most web use-cases call for downscaling. Hero images are captured at 4000 pixels or wider and then trimmed to 1200-2000 pixels for the layout. Thumbnails start large and end small. Upscaling is occasionally needed when a legacy image must fill a modern display container, but the trade-off in sharpness should be accepted before committing to that path.

The aspect ratio is the mathematical relationship between width and height. A 4000-by-3000 image has a 4:3 ratio. When the lock is engaged and you type a width of 1600, the tool divides 1600 by 4 and multiplies by 3, producing a height of 1200. The result is exactly the shape you started with, scaled to the target width.

Typing only a height works the same way in reverse. Entering 800 as the height with the lock on computes the width as 1067 pixels. The lock can be toggled off when you deliberately need a different shape, for example stretching a landscape into a tall banner. Be aware that unlocking distorts the image unless you intend the custom fit.

Percentage mode sidesteps the dimension question entirely. Entering 50 applies a 0.5 multiplier to both width and height simultaneously, so a 4000-by-3000 photo becomes 2000 by 1500. The ratio is inherently preserved because the same factor is applied to every axis.

• Lock ON, width entered: height is computed from the source ratio.
• Lock ON, height entered: width is computed from the source ratio.
• Lock OFF, both entered: each dimension is applied independently, which may distort.
• Percentage mode: the same factor is applied to every axis, preserving the ratio.

After the pixel grid is redrawn at the target size, the canvas encodes the result into the format you choose. JPG gives the smallest files for photographs but has no transparency. PNG keeps sharp edges and alpha channels at the cost of larger files. WebP offers the best balance of size and quality on modern browsers and is supported on WordPress 5.8 and later.

The quality slider applies only to lossy formats (JPG and WebP). A setting of 80 is the standard web sweet spot: files are 60-80 percent smaller than quality 100 while remaining visually clean on standard displays. Dropping below 60 on photographic content produces blocking artifacts that become distracting.

Switching the output format during a resize is a common optimization. A 7.8 MB camera JPG resized to a web header and exported as WebP at quality 80 can land under 200 KB, a reduction of over 97 percent from the original byte count.

The entire resize pipeline runs inside your browser through the Canvas API. The source file is decoded into an off-screen bitmap, redrawn at the target dimensions, and then encoded into the output format. At no point does the image data leave your device or travel to a remote server.

When you close the tab or reload the page, the decoded bitmap is released from browser memory. Nothing is stored, cached or logged. The download you receive is the only artifact of the session.

Because processing is local, there is no server-side quota, rate limit or daily cap. You can resize as many files as your device memory allows, subject to the 25 MB per-file ceiling.

The right output width is decided by where the image will appear, not by the size of the source. A handful of standard widths covers a large share of real layouts, and resizing to those values removes the guesswork from every export. Because the aspect lock computes the second dimension for you, entering a single width is enough to produce the right frame.

Choosing a width that matches the widest container the image can occupy means the file never has to be upscaled by the browser and never carries pixels that no layout will show. The widths below are the ones used most often in WordPress themes and responsive designs, ranging from full-width heroes down to icon-scale tiles.

When a legacy image has to fill a larger frame, the quality of the result depends on how the enlargement is handled. The Canvas API applies a smoothing resample when it redraws the image at the larger size, so the output avoids the hard, blocky pixelation of a naive stretch. The trade-off is a general softening, because no new detail is generated at any scale factor.

The soften introduced by upscaling can be partially offset by a light sharpen pass after the enlargement. Sharpening adds local edge contrast, which restores the appearance of crispness without inventing texture. The combined workflow is to upscale to the target size, apply a modest sharpen, and then export at the chosen quality.

• Upscale in a single pass rather than in repeated small steps; several incremental enlargements soften detail more than one direct jump.
• Never upscale to an intermediate size and expect a later crop to restore sharpness. Cropping only removes pixels, it never adds them.
• For line art and pixel graphics, avoid upscaling entirely when a vector or a larger native capture is available.
• A modest 1.25x to 1.5x enlargement of a sharp photo is often acceptable; a 3x or larger jump from a small file is visibly soft.