DEV Community

Cover image for ๐Ÿ“ Image Resizer: Four real resampling algorithms, social presets, batch mode, DPI control
Tomaz
Tomaz

Posted on Originally published at tooladda.online

๐Ÿ“ Image Resizer: Four real resampling algorithms, social presets, batch mode, DPI control

โšก 10-second version

Most resizers give you a width box. tooladda.online/image-resizer.html also lets you choose how the pixels are rebuilt โ€” which is the difference between a crisp downscale and a smeared one.

โ— Important

Resizing happens on your machine. Nothing is uploaded, so batch-resizing 60 photos costs you no bandwidth and leaks no EXIF.


๐Ÿ”ฌ The algorithm actually matters โ€” here's when

Resizing means inventing or discarding pixels. Four common ways to decide what each output pixel should be:

Algorithm How it decides Use it for Avoid it for
Nearest neighbour Copies the single closest pixel ๐ŸŽฎ Pixel art, sprites, QR codes โ€” keeps hard edges perfectly crisp Photographs โ€” you get jagged, blocky stairsteps
Bilinear Averages the 4 surrounding pixels Quick previews, mild changes Large downscales โ€” noticeably soft
Bicubic Weighted 16-pixel cubic fit ๐Ÿ“ท General photo work; a safe default Very large downscales (still softer than Lanczos)
Lanczos Windowed sinc over a wider neighbourhood ๐Ÿ† Big downscales and detailed photos โ€” the sharpest realistic result Pixel art (it will blur your hard edges)

The counter-intuitive bit: the "best" algorithm depends on the content, not the quality you want. Scale a QR code or a game sprite with Lanczos and you'll destroy it โ€” the crisp block boundaries that make it readable get blended into grey mush. Nearest neighbour, normally the "worst" option, is the correct one there.

Upscaling can't add detail

Enlarging a 500 px image to 2000 px does not recover information that was never recorded. Every algorithm is guessing. Lanczos guesses more pleasantly than bilinear, but if you need a big image, start from a big image.

Downscale, then sharpen

Any good downscale slightly softens the result โ€” that's the averaging doing its job. A small sharpening pass afterwards is standard practice and makes a resized photo look intentional rather than blurry.


๐Ÿงญ How it works

Diagram


โœจ What's inside

### ๐ŸŽ›๏ธ Algorithm choice Four resamplers, selectable per job โ€” not one hidden default you can't inspect. This is the feature almost no free resizer exposes. ### ๐Ÿ“ฑ Social media presets Correct dimensions for profile pictures, posts, stories, covers and thumbnails, so you stop looking them up every time.
### ๐Ÿ“ฆ Batch resize Whole folders in one pass, out as a ZIP, using web workers so the tab stays usable while it runs. ### ๐Ÿ–จ๏ธ DPI control Set the DPI tag for print workflows โ€” the thing that decides whether your 3000 px image prints at 10 inches or 30.

๐Ÿ› ๏ธ Real jobs

Situation Setting to use
๐ŸŒ Website images Resize to the actual display width; Lanczos; then compress
๐Ÿ“ฑ Profile picture Social preset; square crop; Bicubic
๐ŸŽฎ Pixel art / sprite sheet Nearest neighbour, integer multiples (2ร—, 3ร—, 4ร—)
๐Ÿ–จ๏ธ Print at a known size Set pixel dimensions for 300 DPI at your target inches
๐Ÿ“ค Upload form with a px cap Exact pixel dimensions, then compress to the KB limit
๐Ÿ“š Whole photo archive Batch mode, percentage scaling, ZIP out

๐Ÿ“– Five steps

1.  Open   โ†’  tooladda.online/image-resizer.html
2.  Drop   โ†’  one image or a whole batch
3.  Size   โ†’  pixels, percentage, or a social preset
4.  Method โ†’  Lanczos (photos) ยท Nearest (pixel art / QR)
5.  Export โ†’  download, or ZIP for a batch
Enter fullscreen mode Exit fullscreen mode

โ–ถ Resize now โ€” tooladda.online/image-resizer.html

๐Ÿ’ก Tip

Resize before you compress, never after. Fewer pixels is a bigger and cleaner saving than a lower quality setting โ€” and compressing then resizing means you paid the quality cost twice.


โ“ FAQ

Is it free? Watermark or batch limit?

Free, no watermark, no signup, and the batch limit is your device's memory.

Which algorithm should I just pick?

Lanczos for photographs, especially when shrinking a lot. Nearest neighbour for pixel art, QR codes and anything with deliberately hard edges.

Can I make a small image large and sharp?

No. Upscaling interpolates; it cannot recover detail that was never captured. Start from a larger original.

Why does my downscaled photo look slightly soft?

That's normal for correct resampling. Apply a light sharpen afterwards โ€” standard practice in every professional workflow.

Does changing DPI change the pixels?

No. DPI is a tag telling a printer how densely to lay those pixels down. Same pixels, different physical size on paper.

Are my images uploaded?

No โ€” everything is processed locally in your browser.


๐Ÿ”ฌ Under the hood

  • Vanilla JavaScript with a real Lanczos implementation, not just the browser's default canvas scaling.
  • Batch work offloaded to web workers so large sets don't freeze the tab.
  • Aspect ratio locking, percentage and absolute modes, DPI metadata writing.
  • Offline-capable once loaded.

Originally published on ToolAdda, where Image Resizer runs free in your browser โ€” nothing is uploaded, nothing leaves your device.

Top comments (0)