📐 Image Resizer
Resize photos locally — nothing is uploaded, ever.
Click to choose or drag & drop an image
JPG, PNG, WebP, GIF — any size
Why Image Resizing Still Matters (And How to Get It Right)
There's a moment every web developer, social media manager, or online shop owner knows well — you've got a gorgeous 4K photo from your camera, and you need it to fit a 1200×628 Facebook header, a 512×512 thumbnail, or a product listing that demands exactly 800 pixels wide. Most people drag it into some bloated desktop app, wait for it to load, click through five dialogs, and wonder if their file got uploaded to some server in the process. There's a cleaner way.
This tool resizes your images entirely inside your browser, using the HTML5 Canvas API. Your photo never leaves your device — not even for a millisecond. That matters more than people realize, especially when you're resizing anything confidential: a scanned document, a passport photo for a visa form, or client work under NDA.
How Pixel Dimensions Work
When you set a target width and height in pixels, you're telling the renderer exactly how many colored squares to pack into the output image. A 4000×3000 photo resized to 800×600 contains 12× fewer pixels — each output pixel gets computed by sampling and averaging the surrounding source pixels (this is called bilinear or bicubic interpolation). Modern browsers use "high-quality" smoothing on the canvas, which does a decent job of preserving edge sharpness and color transitions even on aggressive downscales.
Where beginners trip up: they type 800 in the width box, forget to adjust the height, and end up with a squashed or stretched image. That's why the aspect ratio lock exists. When the lock is active, changing the width automatically recalculates the height as Math.round(newWidth / (originalWidth / originalHeight)) — simple division that keeps your subject looking like itself.
Percentage Scaling — When You Don't Know the Target Size
Sometimes you don't need a specific pixel count. You just need something smaller. "Half the size" is a perfectly valid brief, and that's where percentage mode shines. Type 50, and the tool calculates Math.round(originalWidth × 0.5) for width and the same for height. The math is symmetric, so a 50% scale of a 3840×2160 image gives you exactly 1920×1080 — no rounding drift between dimensions.
Going above 100% (say, 200%) will upscale the image. The browser will interpolate new pixels, which softens the result — you're not adding real detail, just making the canvas bigger. For upscaling, you'll get better results with dedicated AI tools, but for slight upscales (110–120%) on images you just need to hit a minimum pixel count, this works fine.
Choosing the Right Output Format
The format dropdown is where a lot of file-size decisions live.
JPEG is the workhorse. It throws away some color data that human vision doesn't strongly perceive, which is why a 2MB PNG can become a 200KB JPEG with barely visible quality loss. Set quality to 85–92% for web use: sharp enough to pass scrutiny, small enough to load fast. Drop it to 70–75% if file size is critical (mobile pages, email attachments). JPEG doesn't support transparency — any transparent areas will fill with white.
PNG is lossless. Every pixel is preserved exactly. The quality slider has no effect on PNG output because nothing gets compressed away — the file size is determined purely by the pixel count and color complexity. Use PNG when you need transparency (logos, icons with cutout backgrounds) or when you need pixel-perfect reproduction (screenshots, graphics with text).
WebP is the smart pick for anything going on a modern website. It's about 25–35% smaller than JPEG at equivalent visual quality, and it supports transparency like PNG. Browser support is now essentially universal. If you're building a site and the images won't need to work in 2012-era browsers or obscure email clients, use WebP for everything.
Step-by-Step: Resizing for Common Platforms
Instagram square post (1080×1080): Switch to Pixel Dimensions mode. Unlock the aspect ratio (click the lock icon to 🔓). Type 1080 in both width and height. Choose JPEG at 90% quality. This crops to square via the canvas — if your image isn't already square, the composition may shift, so crop your photo manually first if placement matters.
Email newsletter header (600px wide): Keep aspect ratio locked. Type 600 in the width field. The height fills automatically. Choose JPEG at 80% — newsletters are often viewed on slow connections, so smaller wins. The locked ratio ensures your header doesn't distort.
Profile photo (512×512): Unlock ratio, set 512×512. For most profile photos that are roughly square already, this works directly. WebP at 85% quality will give you the smallest file that still looks sharp in a circular crop.
Batch-style workflow: Load image → set dimensions → download. Repeat. Since there's no server round-trip, each resize is instant (under a second for most images). Power users can have this tab open alongside their asset folder and process a whole set in minutes.
Quality vs. File Size — The Real Trade-Off
The quality slider maps directly to the second argument of the HTML5 Canvas toDataURL() method: a value between 0 and 1. At 92% (0.92), JPEG output is nearly indistinguishable from the original at normal viewing distance. At 70% (0.70), you start seeing compression artifacts on high-frequency areas like hair, grass, or fabric texture — fine for thumbnails, noticeable on hero images.
A practical tip: for images with large flat-color areas (diagrams, illustrations, screenshots of UIs), JPEG at 85% looks excellent because there's less high-frequency detail to lose. For photographs with lots of texture — a landscape, a close-up portrait — stay at 90%+ if quality matters, or consider WebP which handles texture better at the same byte budget.
Privacy: What "Local Processing" Actually Means
When this tool loads, it downloads the JavaScript to your browser. After that, everything runs in your browser's JavaScript engine — no image data, no metadata, no file size, no dimensions are sent anywhere. Your internet connection is idle during the resize. You can even disconnect from the internet after the page loads and the tool continues to work perfectly.
This isn't a privacy policy claim — it's a technical fact you can verify yourself. Open browser DevTools (F12), click the Network tab, clear it, then drag in a photo and click Resize. Watch the network requests: zero. The canvas renders locally, the download is a local blob URL. Some tools market "privacy" while still sending anonymized metadata or loading analytics scripts during use. Here, there is no server infrastructure involved in the resize operation at all.
Limits and Edge Cases to Know
Canvas has a maximum pixel count that varies by browser — in practice, anything above about 16,000×16,000 pixels may fail silently or produce a blank output. This tool caps inputs at 16,000px per side to avoid that. GIF files will load and resize, but animated GIFs will be flattened to the first frame — canvas doesn't preserve animation. For animated GIF resizing you need a dedicated tool. SVG files, being vector, don't need pixel resizing at all — export them from your editor at the target size instead.
Finally: if you're resizing a photo that was 12MP on your phone and you need it to stay high-quality for print, remember that print resolution matters — 800×600 pixels at 300 DPI only prints at roughly 2.7×2 inches. Pixel dimensions and print size are separate concepts. For screen use, pixels are what matter. For print, think about DPI alongside pixel count.