Image Resizer
Drop a JPG, PNG or WEBP — resize it by exact pixel size or percentage, pick the format and quality, and download the result. Nothing ever leaves your browser.
Drag and drop an image here
or
JPG, PNG or WEBP — up to 8000px per side and 40MB
Select an image to get started — nothing is uploaded, everything happens in your browser.
Every resize runs locally in your browser using canvas — your image is never uploaded to a server.
Resizing by dimensions vs. by percentage — and why the distinction matters
Most image tasks that involve "resizing" are really about hitting a specific pixel target that someone else defined — a form that only accepts 400×400 avatars, a marketplace listing capped at 1600px on the longest side, a blog theme that renders inline photos at 1200px wide, or a print template sized for a 300dpi 4×6in photo (1200×1800px). This tool exists to change the physical dimensions — width and height in pixels — of an image, not to shrink its file size for its own sake. Reducing file size is a side effect of having fewer pixels to encode, but the goal here is the shape and scale of the image, not squeezing bytes out of an unchanged canvas.
Because of that, the two modes above the width/height fields solve different problems. By dimensions is for when you know the exact pixel number you need — a platform's upload spec, a design grid, a print size. By percentage is for when you just want a smaller or larger version of the same photo without doing arithmetic — "half size" or "double size" — and it always keeps both sides scaled by the same factor, so there is no risk of accidentally distorting the image.
How to use it
- Drop in or choose a JPG, PNG or WEBP file (up to 8000px per side, 40MB).
- Pick a mode. In By dimensions, type a width or a height — with "Lock aspect ratio" checked, the other side is computed for you automatically. In By percentage, type a scale factor from 1% to 500%, or tap one of the quick chips (25%, 50%, 75%, 150%, 200%).
- Choose an output format — Keep original format re-encodes at the new size without converting — and, for JPEG/WEBP, set a quality level with the slider.
- Resize, review the result dimensions and file size against the original, then download.
The math behind the resize
With aspect ratio locked, the field you type into is the "driving" dimension: if you enter a width w, the matching height is h = round(w × originalHeight ÷ originalWidth), which keeps the original ratio exact to the nearest pixel. Percentage mode applies the same scale factor to both sides at once: newWidth = round(originalWidth × pct ÷ 100) and newHeight = round(originalHeight × pct ÷ 100). If you turn locking off, width and height become fully independent — which is the one path that lets you stretch or squash an image on purpose, and the one to avoid by accident.
A phone photo is 4032×3024 (a 4:3 ratio). The site's content column only shows images at 1200px wide. With locking on, type
1200 into Width: height becomes round(1200 × 3024 ÷ 4032) = 900. Result: 1200×900, same proportions as the original, ready to drop into an article.
A 4000×3000 source is scaled by 300% for a large-format mockup. Percentage math gives 12000×9000, but this tool caps any side at 8000px to protect browser memory. Since both sides exceed the cap, the result is scaled back down proportionally:
scale = 8000 ÷ 12000 = 0.667, giving a final 8000×6000 — the ratio is preserved, but you land at the cap rather than at the requested 300%.
A 1600×1200 (4:3) photo needs to fill a 16:9 video thumbnail template exactly, with no cropping allowed. Unlocking aspect ratio and setting Width 1600 / Height 900 will hit that box precisely, but every round or straight-edged object in the photo will look visibly squeezed vertically — this is a deliberate stretch, not a neutral resize, and it's usually better to crop to 16:9 first in an editor and resize the crop instead.
Why upscaling has a ceiling
Downscaling throws away pixels and is essentially lossless for perceived sharpness — you're sampling detail that already exists. Upscaling works the opposite way: the canvas has to invent new pixel values between the ones that exist, using interpolation (smoothing based on neighboring pixels). A 500×500 icon resized up to 1000×1000 will display at double the size, but it will not gain any real detail — edges soften and fine texture looks blurred compared to a photo that was natively captured at 1000×1000. Percentage mode allows up to 500% specifically so you can stretch a small image to fit a layout slot, not to "enhance" its resolution.
Common target sizes by use case
| Use case | Target size | Suggested mode |
|---|---|---|
| Blog / article inline photo | 1200px wide (auto height) | Dimensions, width only, lock on |
| Square social media post | 1080×1080 | Dimensions (crop to square beforehand) |
| Profile / avatar photo | 400×400 | Dimensions |
| Marketplace listing (longest side) | ≤1600px | Percentage, scaled to fit |
| Email signature logo | 300×90 | Dimensions, lock off (fixed box) |
| Print photo at 300dpi, 4×6in | 1200×1800 | Dimensions |
Common mistakes
- Unlocking aspect ratio out of habit. Leaving locking on is the safer default; only turn it off when a fixed box genuinely requires a different ratio than the source.
- Typing a huge percentage expecting more detail. Upscaling is a display-size change, not a quality upgrade — see the ceiling above.
- Forgetting which field is "driving" the calculation. With locking on, the last field you edited controls the other — if you meant to fix the height, click into the height field rather than leaving your cursor in width.
- Picking PNG for photos. PNG is lossless and great for screenshots or flat-color graphics, but a resized photo saved as PNG is typically several times larger than the same photo as a high-quality JPEG or WEBP, with no visible difference for a photographic subject.
What this tool doesn't do
This resizer changes pixel dimensions and re-encodes the result — it doesn't crop, rotate, batch-process multiple files, or optimize an unchanged image purely to shrink its file size while keeping the same dimensions (that's a separate, dedicated job). It also can't add real detail beyond a photo's native resolution: the 8000px input cap and the 500% upscale ceiling exist because both very large canvases and extreme interpolation stop being useful — the first for browser stability, the second because the output stops looking sharp long before you reach it.
Sources & further reading
- MDN Web Docs — Canvas API reference used for in-browser image scaling and re-encoding
- MDN Web Docs — image file type and format guide (JPEG, PNG, WebP trade-offs)
- W3C — PNG specification, the standard behind lossless raster output
- W3C Web Accessibility Initiative — images tutorial on sizing and alternative text
Frequently asked questions
How do I resize an image without losing quality?
Start from the largest version of the photo you have — resizing down preserves far more detail than resizing up, which can only guess at new pixels and looks soft or blocky. Keep "Lock aspect ratio" on so people and objects don't stretch, and pick a format that matches the content: PNG for screenshots, logos or anything with flat colors and text, and JPEG or WEBP with a high quality setting (85–95) for photos. This tool draws your image onto a canvas at the exact size you choose and uses the browser's high-quality smoothing, so a same-size or downscaled JPEG or WEBP export usually looks visually identical to the original at a fraction of the file size.
What's the difference between resizing by dimensions and by percentage?
Resizing by dimensions lets you type an exact target width or height in pixels — useful when a website, form or marketplace tells you it needs exactly 1200×630 or 800px wide. Resizing by percentage scales both sides by the same factor, so 50% turns a 4000×3000 photo into 2000×1500 without you doing the math, and it always keeps the original proportions. Use dimensions when you have a specific pixel requirement, and percentage when you just want a smaller or larger version of the same photo.
Why is there an 8000px limit, and what if my image is bigger?
Browsers decode and redraw images in memory, and an image far beyond 8000px on a side can use hundreds of megabytes of RAM and crash the tab on a phone or an older laptop — this image resizer caps input at 8000px per side to keep that reliable for everyone. If your original is bigger, most photo apps and phone camera apps can export or crop a smaller version first (a phone photo is very rarely above 8000px in the first place, so this mostly affects large scans, panoramas and stitched images), and then you can resize that copy here.
Is my photo uploaded anywhere?
No. This resizer runs entirely in your browser using the HTML canvas element — the file you choose is read locally, drawn to a canvas at your chosen size, and encoded back into an image file, all on your own device. Nothing is sent to a server, there's no upload progress bar because there's no upload, and closing the tab leaves no trace beyond your last settings, which are kept only in your browser's local storage.
Which output format should I choose — JPEG, PNG or WEBP?
JPEG is the safest general choice for photos and is supported everywhere, with the quality slider trading file size for detail. PNG is lossless and supports transparency, so it's the right pick for screenshots, logos, icons and images with sharp text or flat colors — but it produces much larger files for photos. WEBP is a newer format that is now supported by essentially every modern browser and typically gives a smaller file than JPEG at the same visual quality, so it's a good default if you don't need maximum compatibility with very old software. "Keep original format" simply re-encodes at the new size without changing the format at all.