What this tool does

The Image Resizer takes a PNG, JPEG, WebP, or GIF you drop into the page and re-encodes it at the dimension or scale you ask for. The resize, the format conversion, and the quality-vs-size trade-off all happen on a <canvas> in your tab, there is no upload, no server round-trip, no "your image is being processed" spinner that's hiding a network call.

You get a side-by-side before/after, the exact byte delta, and a download in the format you picked.

How to use it

1. Drop, paste, or pick a file. Any standard raster format works. The tool reads pixel dimensions immediately and prefills the width/height fields with the source size. 2. Set the target. Type a new width (or height, they're linked when "lock aspect" is on, free when it's off). Or hit one of the eight presets: Avatar 256, Thumb 480, OG image (1200×630), Twitter card (1200×675), Favicon 64, Half / Quarter / Double scale. 3. Pick a format and quality. WebP is the smallest at the same visual quality; JPEG is the most compatible; PNG is lossless (the quality slider is ignored). Quality 1–100 maps directly to the canvas encoder's quality argument. 4. Hit Resize. The output card shows the new file with byte count and a delta pill (-42 % when smaller, +18 % when larger). Download saves it as <original>-<w>x<h>.<format>.

How the resize actually works

The browser decodes your file into an ImageBitmap, then draws it onto an offscreen <canvas> at the target size with imageSmoothingQuality = 'high'. That uses the browser's internal Lanczos-or-similar filter, for downscaling it's the right choice. For upscaling above ~2x there's no real detail to recover, so the result looks soft; that's a fundamental property of bitmap upscaling, not a tool limitation.

canvas.toBlob(mime, quality) then re-encodes the pixels into your chosen format. WebP and JPEG accept the quality slider; PNG ignores it (PNG is lossless, so quality has no meaning).

When to use it (and when not)

Use this tool when you need a quick one-off resize: a screenshot trimmed to OG dimensions, an avatar shrunk to 256px, a hero image downsampled before upload, a thumbnail generated for a card grid. The eight presets cover ~80% of common web sizing tasks.

Don't use it for professional photo retouching (use a real editor), face-detection auto-cropping (we don't do it on purpose, heuristic cropping mangles faces in surprising ways), or batch processing of dozens of files at once. For batches you'd want a separate batch tool that streams output to a zip.

Common gotchas

  • GIF input loses animation. The decoder reads the first frame only, there is no animated-WebP/animated-PNG output path in the canvas API. If you need to keep animation, use a GIF-specific encoder elsewhere.
  • Free-aspect makes pixels stretch. Turn off "lock aspect" only when you actually want a non-proportional resize. Most of the time you don't.
  • Color profile is dropped. The canvas converts everything to sRGB. Wide-gamut (Display P3) photos lose their extended colors. For photo workflows that need to preserve P3, this isn't the right tool.
  • Quality 100 isn't lossless on JPEG. JPEG is fundamentally lossy; quality 100 just means "use the encoder's least-aggressive quantization." Use PNG when you need byte-for-byte preservation.

Privacy

All processing runs in your browser. The image you drop is decoded by createImageBitmap, drawn to a canvas, re-encoded by canvas.toBlob, and offered as a download via a local blob URL. Nothing is uploaded. There's no analytics ping that includes the image, no "save to cloud" button hiding a fetch. Close the tab and the file is gone from the page's memory.

Frequently asked

Is my image uploaded anywhere?

No. The image is decoded by createImageBitmap, drawn to an offscreen canvas, and re-encoded by canvas.toBlob — all inside your browser tab. There is no fetch, no upload, no analytics ping that includes the file.

What formats can I resize?

Any raster format the browser can decode: PNG, JPEG, WebP, GIF, and BMP. Output formats are WebP, PNG, and JPEG — covering the practical web cases. SVG is vector and isn't a sensible target for a pixel-resize, so it's not supported.

Why does my GIF lose its animation?

The canvas API only decodes the first frame of a GIF. Re-encoding to animated WebP or animated PNG isn't part of canvas.toBlob, so the output is always a single frame. If you need animation, use a GIF-specific tool.

What does the quality slider actually do?

It maps to the second argument of canvas.toBlob — a 0–1 quality hint passed to the encoder. WebP and JPEG honor it; PNG ignores it because PNG is lossless. Quality 85 is a good default for WebP; below 60 you'll see visible artefacts.

Will upscaling make my image look better?

No. Upscaling a 256-pixel image to 1024 pixels can't invent detail that wasn't in the source. The browser's bilinear/bicubic filter produces a soft, smoothed result. For meaningful upscaling you'd need an AI super-resolution model, which this tool doesn't ship.

What's the difference between Half size and the OG preset?

Half size scales by 0.5 relative to the source (so a 2000×1500 image becomes 1000×750). The OG preset always sets 1200×630 regardless of source size, since OG images have a fixed canonical dimension.

Why is the WebP output so much smaller than the JPEG?

WebP uses VP8/VP8L compression which is 25–35% more efficient than JPEG at equivalent visual quality. For web delivery WebP is the right default unless you specifically need JPEG or PNG compatibility.

Does it preserve EXIF metadata?

No. Re-encoding through canvas strips EXIF, ICC profiles, and any other metadata. The output is pure pixel data in sRGB. If you need to keep EXIF (camera info, GPS, etc.), use an image editor that preserves metadata explicitly.

Related tools