Image Resizer

Social media managers staring at a 12 megapixel camera photo that must fit a 1200 by 630 link preview, developers trimming screenshots before attaching them to a bug report, and shop owners shrinking product shots for a listing that rejects oversized uploads all need the same thing. Resize a photo to a specific size without hunting for installed software or trusting an unknown website with the file.

Drop a JPG, PNG, or WebP onto the tool, choose exact pixels, a percentage, or a social media preset, and download the resized result in the format you need. The pixel work happens on a canvas inside your browser, so the file never leaves the machine.

How browser-side resizing works

The file is read with the File API and decoded into an ImageBitmap, which gives the tool the natural width and height without touching a network. A canvas element is created at the target dimensions, and the source bitmap is drawn into it with the 2D context drawImage call, which resamples the pixels using the browser built-in scaling filter. Downscaling averages neighboring pixels, while upscaling interpolates and invents detail, which is why the tool flags an upscale instead of silently pretending quality is preserved.

The target dimensions come from the computeTargetSize utility, which applies the selected mode, honors the aspect lock by deriving the missing dimension from the original ratio, and clamps values to a sane 1 to 10000 pixel range. Social presets simply fill the width and height fields with known good sizes for each platform.

Export uses canvas toBlob with the chosen MIME type and quality fraction. WebP and JPEG accept a quality parameter from 0 to 1, while PNG ignores it because PNG is lossless. The resulting Blob becomes an object URL for the preview and the download link, so the resized bytes never leave browser memory.

Before and after: camera photo to Open Graph card

Input, a full resolution camera photo in EXACT mode:

original: 4032 × 3024 px (12.19 MP)
mode:     exact, aspect lock off
target:   1200 × 630 px
format:   WebP, quality 85

Output, the resize math and result:

result:   1200 × 630 px (0.76 MP)
aspect:   1.3333 original ratio, target 1.9048
megapixel delta: -94%
upscale:  no
download: card-image.webp

With the aspect lock on and mode set to Width only at 1200, the same photo yields 1200 by 900 instead, preserving the original 4:3 ratio. The Percentage mode at 25 produces 1008 by 756 from the same 4032 by 3024 source.

Who resizes images with this tool

Common mistakes when resizing images

• Turning the aspect lock off by accident. Disabling the lock lets width and height diverge, which stretches the image. Leave it on unless you deliberately want a non-proportional crop, and even then prefer cropping in an editor over stretching in the resizer.
• Upscaling a small source to a large target. The tool flags an upscale because the browser is interpolating pixels that were never captured. If the result looks soft, use a larger original or reduce the target size instead of hoping the scaler recovers detail.
• Exporting photos as PNG. PNG is lossless and great for text and hard edges, but it produces very large files for photographs. Choose WebP or JPEG for camera photos and reserve PNG for screenshots and logos that need transparency.
• Ignoring the quality slider on JPEG and WebP. Quality 100 defeats much of the point of resizing for the web. Start at 85, compare the preview, and drop toward 70 for hero images where the size savings matter more than perfect fidelity.

Best practices for image resizing workflows

• 1.Resize down to the largest size the layout will actually display, then let CSS scale it, so the browser downloads no more pixels than the viewport can show.
• 2.Export WebP for general web use, keep JPEG as the fallback for older pipelines, and reserve PNG strictly for assets that need lossless edges or an alpha channel.
• 3.Resize before compressing, because compressing a full resolution photo wastes time encoding pixels that the resize step is about to throw away.
• 4.Name the downloaded file with the dimensions in it, such as product-1200x630.webp, so a future you can tell at a glance which asset belongs in which slot.

Frequently asked questions