Resize images _

How browser-based image resizing works

Every resize is a short pipeline that runs entirely in JavaScript. No codec library is downloaded and no server is involved. The browser's own Canvas API decodes the file, redraws it at the target size, and re-encodes it in memory, then hands you a Blob the page can preview or zip up. Because every step lives inside the tab's sandbox, the original files never reach the network.

1. Read each uploaded file as a Blob and create an object URL so the browser can decode it locally, without copying bytes to a server or writing them to disk.
2. Work out the target dimensions from your chosen mode — a longest-side cap, an exact width and height, or a percentage scale. The aspect-ratio lock keeps the proportions correct when you edit a single field.
3. Create an offscreen Canvas at the target size and call ctx.drawImage(source, 0, 0, width, height) to redraw the decoded pixels. The browser handles the interpolation that smooths the scaled result.
4. Call canvas.toBlob to re-encode in the source format. PNG stays lossless, JPEG and WebP re-encode at high quality. Then the page shows a before/after card and offers a per-image download or a single ZIP built in memory with fflate.

Why resize images?

• Oversized images are the most common cause of slow pages. A 4000×3000 phone photo dropped straight into a 600-pixel-wide layout ships roughly 40 times more pixels than the screen can show. Capping the longest side to 1600 px before upload cuts page weight hard and improves Core Web Vitals LCP.
• Upload forms enforce strict dimensions. Avatar slots, ID-photo portals, marketplace listings, and OG social cards all want specific pixel sizes: 1200×630 for an Open Graph preview, 512×512 for an app icon, 150×150 for a thumbnail. Hit the number exactly and you skip the rejected-upload loop.
• Email and chat tools quietly recompress anything large, which can wreck a clean screenshot. Resizing to a sane width yourself keeps the result predictable instead of leaving it to someone else's lossy pipeline.
• Batch consistency matters for galleries and catalogues. Running a folder of mixed-size photos through a single 800×800 target means every card lines up on the grid, with no stray giant image breaking the layout.

Common applications

Resizing comes up whenever the source dimensions and the destination's expectations don't match. Three patterns show up again and again.

• Preparing product photos for a Shopify or WooCommerce store. A folder of 4000-pixel camera originals gets capped to a 1600 px longest side so the storefront loads fast, while the aspect ratio stays untouched so nothing looks stretched.
• Generating social and app assets from one master file. Set an exact 1200×630 for the Open Graph card, then 512×512 for an app icon, exporting each in a couple of clicks without opening a heavyweight editor.
• Shrinking a batch of QA or support screenshots before attaching them to a ticket. Scaling a 50-shot folder to 50% typically drops the archive size by roughly three quarters before it goes into a bug tracker.

A worked example: 4000 px photo to a 1600 px web image

A 4000×3000 photo straight off a phone is a common payload that's far larger than any web layout needs. It's a fair benchmark for what resizing saves.

Drop the photo into the upload zone, leave the mode on Limit longest side, and set the value to 1600. The Canvas pipeline redraws the image at 1600×1200 with the aspect ratio preserved, then re-encodes it in the original format. The output card shows the new dimensions and file size, which for a typical JPEG falls from several megabytes down to a few hundred kilobytes. Click Download on the card to grab the single file, or click Download .zip if you resized several images in one pass. The whole round-trip, from drop to download, runs in a fraction of a second and uses zero bandwidth after the page itself loads.

What resize modes are available?

Three. Limit longest side caps the longer of width or height to a pixel value and scales the other side to match, which is the safe default because it never distorts. Exact width × height lets you type both numbers, with an aspect-ratio lock that recomputes the second field from the source ratio as you edit the first — turn the lock off when a form demands an exact non-proportional size. Scale by percentage multiplies both dimensions by a single factor, handy for halving or doubling a whole batch at once. Six one-click presets (1920×1080 down to a 150×150 thumbnail) cover the most common targets.

Does this happen on my device?

Yes, fully. The page uses the browser's native Canvas API and the Web File API to decode, redraw, and re-encode each image in memory. No image data is sent to a server, there is no temporary upload, and there is no cloud round-trip. You can verify it: open DevTools, switch to the Network panel, and run a resize. The only outbound requests you'll see are the initial page load and ad calls. Nothing image-shaped leaves the tab, which is what makes this safe for scanned IDs, medical images, and other material you'd never want to upload.

Will resizing reduce the quality?

Shrinking an image (downscaling) looks excellent — the browser averages the source pixels into fewer pixels, so detail stays crisp and the file gets much smaller. Enlarging beyond the source resolution (upscaling) cannot invent detail that was never captured, so a small image scaled up will look soft; that's a limit of every resizer, not this one specifically. The output keeps the source format: PNG stays lossless, while JPEG and WebP re-encode at a high quality setting so the visible difference from the original is hard to spot.

Which file formats does it support?

On the input side, any format the browser can decode is accepted: PNG, JPEG, WebP, GIF, and BMP cover almost every file a phone, camera, or screenshot tool produces. The output preserves the source format wherever the Canvas encoder supports it — PNG, JPEG, and WebP round-trip directly. GIF and BMP, which the Canvas API can decode but not re-encode, are saved as lossless PNG instead. The resized filename includes the new dimensions (for example photo-1600x1200.jpg) so a batch stays easy to sort.

Drop your images, pick a size, resize. Everything runs in your tab. No upload, no account, no waiting on a server queue.