Image Resizer / Upscaler
Resize by percentage or exact pixels with browser-quality or nearest-neighbor scaling, plus optional light sharpen and contrast. Preview before/after and download PNG, JPEG or WebP.
Before
After
What can — and can't — classical image resizing do?
What this tool does
Image Resizer / Upscaler scales images up or down using classical canvas resampling: choose a percentage between 50% and 400%, or type exact target dimensions with an aspect-ratio lock. Pick between the browser's own high-quality resampling (smooth, good for photos) or nearest-neighbor scaling (blocky, good for pixel art and icons). Optional light sharpen and contrast controls run after the resize to help the result read a little crisper. Compare before and after side by side, then download PNG, JPEG or WebP.
Why you need it
Resizing an image sounds trivial until the result looks soft, blurry, or subtly wrong. Naively stretching a small thumbnail to fill a large banner slot produces mush; scaling pixel art with smoothing turns crisp 8-bit edges into a blurry gradient. Having explicit control over the algorithm — not just a single "resize" button — is the difference between a print-ready asset and a visibly low-quality one.
Developers need quick, no-install resizing for responsive image sets, placeholder assets, and quick mockups. Game and pixel-art creators specifically need nearest-neighbor scaling so sprites stay crisp instead of getting anti-aliased into mush. And anyone repurposing an old, small photo for a slightly larger display needs to understand upfront that resizing changes pixel count, not information content — a distinction this tool is upfront about rather than quietly overselling.
Because everything happens in a canvas in your browser, there is no upload wait, no account, and no file-size limit imposed by a server — just immediate, private processing.
How to use it
- Drop or upload an image. Processing happens locally — nothing is sent anywhere.
- Choose Scale % for proportional resizing, or Exact size to type target width/height (with aspect lock).
- Pick Browser for smooth photographic scaling, or Nearest neighbor to keep pixel art crisp and blocky.
- Optionally nudge Sharpen and Contrast to help the result read a little clearer.
- Compare before/after, then download as PNG, JPEG, or WebP.
Practical examples
- Responsive image set: Scale a hero photo to 50%, 75% and 100% variants for a
srcset, using Browser scaling for smooth results. - Retro game sprite: Upscale a 16×16 pixel-art icon to 128×128 using Nearest neighbor so every pixel stays a sharp square.
- Quick banner fill: Stretch a smaller graphic to exact banner dimensions, then apply a light sharpen to offset the softness from enlarging.
- Old scanned photo: Modestly upscale a low-resolution scan with a small contrast boost to make it more presentable, understanding no new detail is being invented.
- Thumbnail downscale: Shrink a large product photo to exact catalog dimensions before feeding it to the Image Compressor for final size tuning.
How it works
The source image is drawn onto an off-screen canvas sized to your target dimensions using drawImage(). For Browser scaling, imageSmoothingEnabled is turned on with imageSmoothingQuality: "high", which asks the browser to use its best available resampling filter — typically a bilinear or bicubic-style algorithm well suited to photographic content. For Nearest neighbor, smoothing is explicitly disabled, so each output pixel samples the single nearest source pixel instead of blending neighbors, preserving hard edges.
Contrast is applied through the canvas context's native filter property (the same syntax as CSS filter: contrast()) before the image is drawn, so it is baked into the resampled result. Sharpen runs afterward as a small unsharp-mask pass: it reads the resized pixel data, blends each pixel with the difference between itself and its immediate neighbors, and writes the boosted result back — a classic, lightweight way to add perceived edge crispness without any AI model or external dependency. None of these steps add information that was not already present in the source pixels; they only redistribute or emphasize what is already there.
Common mistakes
- Expecting AI-level upscaling: Classical scaling enlarges pixels; it cannot reconstruct fine detail lost when a photo was originally captured at low resolution.
- Using Browser scaling for pixel art: Smoothing blurs hard pixel edges — switch to Nearest neighbor for sprites and icons.
- Overusing the sharpen slider: Past a moderate amount, unsharp masking introduces visible haloing around edges — use it lightly.
- Upscaling too far in one step: Extreme scale percentages (300%+) on already-soft source images make softness more, not less, visible.
- Forgetting the aspect lock: Typing width and height independently without locking aspect ratio will stretch or squash the image.
FAQ
Does this tool use AI upscaling?
No. It uses classical canvas scaling — either the browser's built-in high-quality resampling or nearest-neighbor. It enlarges existing pixels; it does not invent new detail the way AI super-resolution models do.
Which algorithm should I pick?
Browser (high quality) for photos and illustrations — it smooths edges naturally. Nearest neighbor for pixel art or icons, where you want hard, blocky edges preserved instead of smoothed.
Can I make a small image look sharp at a much larger size?
You can enlarge it and apply light sharpening to improve perceived clarity, but no classical scaling method recovers detail that was never captured in the original pixels.
Is my image uploaded to a server?
No. Resizing, sharpening and contrast adjustments all happen in a canvas element inside your browser tab.
What do the sharpen and contrast sliders do?
Sharpen applies a light unsharp-mask style boost to edge contrast after scaling. Contrast adjusts overall tonal separation. Both are optional and subtle by design.