📐 Image Resizer

Resize and crop images with aspect lock and web presets. High-quality resampling, entirely in your browser — no upload.

About the Image Resizer

Most images are published far larger than they are ever displayed, and the fix is the least glamorous optimisation on the web: make the pixels match the layout. This tool resizes and crops in your browser with high-quality resampling — no upload, no queue, no watermark.

Cropping happens first (centred, to the aspect ratio you pick), then scaling. The lock keeps proportions honest by always deriving the partner dimension from the source, so repeated edits never accumulate rounding drift. And because the output goes through the same encoder as the compressor, you can pick WebP output and collect both savings in one pass.

How to use it

  1. Drop an image, then optionally pick a crop preset — the largest centred region of that shape is used.
  2. Set dimensions directly, by percentage, or with a fit-within preset (Thumbnail → 4K).
  3. Choose the output format — keeping the original format is the default.
  4. Download; the filename records the output size, e.g. photo-1600x1200.webp.

Frequently Asked Questions

Is my photo uploaded while resizing?

No — resizing happens on a canvas inside your browser. The image never leaves your machine, which you can verify in the network panel. That's also why a 20 MB photo resizes in under a second: there's no round trip.

Does resizing down lose quality?

Scaling down discards pixels by definition, but done well it's the good kind of loss: the tool uses high-quality resampling, and an image displayed at 800px wide genuinely needs no more than ~1600 stored pixels even for high-DPI screens. What you should avoid is scaling UP — the tool allows it, but no resampler can invent detail that was never captured.

What does the aspect-ratio lock actually do?

With the lock on, editing width recalculates height from the original image's proportions (and vice versa), so the image never stretches. The partner value is always derived from the original dimensions rather than the previously-rounded value, so repeated edits don't accumulate rounding drift.

How do the crop presets work?

Each preset (1:1, 4:3, 16:9…) takes the largest centred region of your image with that shape — the same 'crop from the middle' every social platform applies. Cropping happens before resizing, so the dimension fields always describe the final output.

Which output size should I pick for the web?

Content images on most sites display at 700–900 CSS pixels wide, so 1600px wide covers high-DPI screens with room to spare. Thumbnails rarely need more than 480px. Full-screen hero images are the exception — 1920 or 2560px. Pair the resize with WebP output and the byte savings compound.

Why did the file size barely change after resizing?

File size depends on pixel count AND how compressible the content is. If you resized only slightly, or the original was heavily compressed already, the byte saving is proportionally small. Check the size verdict — the tool reports the honest number rather than promising a percentage.

Resizing and cropping images for the web, done right

Most images on the web are displayed far smaller than they are stored. A 4000×3000 phone photo shown in a 800-pixel-wide article column wastes 90% of its pixels — every one of them downloaded, decoded and thrown away by the reader's browser. Resizing images to match their display size is the least glamorous and most reliable image optimisation there is.

Braxik's resizer scales and crops images in your browser with high-quality resampling. Set exact dimensions with an aspect-ratio lock, scale by percentage, snap to web presets from thumbnail to 4K, or crop to a standard aspect ratio first — the largest centred region of your chosen shape, the same crop every social platform applies.

The aspect lock is implemented the careful way: the derived dimension is always recomputed from the ORIGINAL image's proportions, not from the previously rounded value, so editing the fields repeatedly never accumulates drift and the image never stretches by a pixel per edit.

As with every image tool on this site, the file never leaves your machine. Decode, crop, resample and re-encode all happen locally — there is no upload, no queue and no watermark, because there is no server in the loop.

How it works

Cropping happens before scaling: when you pick an aspect preset, the largest centred window of that shape is cut from the decoded image with createImageBitmap, and the dimension fields then describe that cropped region. The two-step order means the numbers on screen always describe the final output.

Scaling uses the canvas's high-quality resampling mode in a Web Worker, which applies proper area-averaging when scaling down — the difference between a crisp thumbnail and a shimmering, aliased one.

The result is re-encoded in your chosen output format (keeping the original format is the default) and named with its dimensions — photo-1600x1200.webp — so a folder of exports stays legible.

Common uses

  • Resize hero and article images to their actual display width before uploading to a CMS — 1600px covers a 800px column on high-DPI screens.
  • Produce square 1:1 crops for avatars and product grids without opening a design tool.
  • Crop photos to 16:9 for YouTube thumbnails, presentation slides and social cards.
  • Scale screenshots down by 50% for documentation, where full-resolution retina captures are twice the size they need to be.
  • Fit images under pixel-dimension limits imposed by marketplaces, app stores and government portals.
  • Generate a small preview version of a large image alongside the original for gallery pages.
  • Chain with the compressor: crop and resize here, then pick WebP output, and collect both savings in one download.

Before you rely on the result

  • Match the output width to roughly 2× the largest CSS display width — that covers high-DPI screens without waste.
  • Avoid upscaling: the tool allows it but warns, because no resampler can create detail the sensor never captured.
  • Check the aspect lock is on before editing dimensions, unless you intentionally want the image stretched.
  • When cropping for a platform, verify the safe area: centred crops are what platforms do automatically, but your subject may not be centred.
  • Prefer resizing the original rather than an already-resized copy, for the same generational-loss reason as compression.
  • Keep output format matched to content: photos → WebP/JPEG, screenshots and graphics → PNG or lossless WebP.
  • If the byte size barely moved after a big dimension change, the source was heavily compressed already — consider also lowering quality slightly.