Image Resizer
Resize images by pixels or percentage, keep the aspect ratio, preview the result live and download locally. Everything is processed in your browser.
Quickly scale relative to the original size: clicking a percentage fills in the target width and height.
How to use
- Drag an image onto the dashed area or click it to pick a local file. PNG, JPG and WebP are supported, up to 30MB.
- Type pixel values into "Target width" and "Target height". With "Keep aspect ratio" checked, editing one side automatically updates the other so the image never distorts.
- For quick changes, click the 50%, 75%, 100% or 150% shortcut buttons.
- The resized preview and output dimensions update live. When satisfied, click "Resize & download" to save the file.
- The output format follows the source: transparent areas are filled with white for JPG/WebP output, while PNG keeps transparency.
FAQ
Does shrinking an image hurt quality?
How do I avoid stretching my image?
Is my image uploaded anywhere?
What happens to transparent backgrounds?
How to use
- Load your image
Drop a PNG, JPG or WebP file into the dashed zone or click to pick one. Files up to 30MB are supported and the original dimensions are shown for reference.
- Enter target pixel sizes
Type values into target width and height. With keep aspect ratio checked, changing one side recalculates the other automatically so the picture never distorts.
- Scale by percentage
Use the 50%, 75%, 100% or 150% shortcut chips to fill both fields at once. They suit quick halving or mild upscaling with no arithmetic.
- Check and download
The resized preview, output dimensions and byte size update live. Click Resize & download when satisfied and the file is saved straight to your device.
- Mind format and transparency
Output follows the source format. PNG keeps its alpha channel, while JPG and WebP fill transparent areas with white. Convert to PNG first if transparency matters.
About this tool
Resizing resamples pixels to a new dimension. Shrinking merges pixels and usually looks sharper. Enlarging invents detail through interpolation, so anything well beyond the original resolution turns soft. Keep aspect ratio stays on by default: change one side and the other follows, so pictures never distort. Everything runs on a Canvas in the browser, and a single side is capped at 16384 pixels to protect memory.
Typical jobs: pulling a 4000-pixel phone photo down to the 1200 pixels a blog post needs. Others are matching an avatar to a platform size or unifying product images to one spec. Resizing changes pixel density, not composition, so it fits cases where resolution must change rather than framing. Shrink first, then compress with the Image Compressor for the smallest file.
How it works
Shrinking is not pixel-dropping: browsers apply smooth interpolation when drawing at a reduced size. Collapsing 4000 pixels straight down to 400 in one step invites aliasing and moire. Halve the image in two or three passes and land exactly on the target in the final one. Enlargement is the opposite problem: interpolation invents pixels by averaging neighbors, so no algorithm can recover detail the lens never captured. The higher the magnification, the more gaps the averaging has to fill. Upscaled softness is mathematics, not a flaw in the tool.
Size talk also needs the physical-versus-CSS-pixel distinction. A content column 1200 CSS pixels wide needs 2400 physical pixels of source material to stay sharp on a 2x retina screen. Doubling each dimension multiplies the pixel count by four, and the file weight follows. Sizing assets to the real pixel density of the destination beats shipping maximum-resolution images everywhere. One 1x and one 2x export cover most real-world layouts, and a third tier can handle special ratios.
When to use it
- Matching the article column width
Blog content columns typically run 700 to 1200 pixels wide. Resize images to fit the column before uploading, and readers stop downloading pixels their screens will never show. The layout then keeps the dimensions the theme was designed around.
- Preparing 2x retina assets
Fix the CSS size from the 1x mockup first, then export at twice the pixel dimensions. Text and edges stay crisp on high-density screens. The file grows roughly fourfold, which is why this step pairs well with compression.
- Hitting exact pixel requirements
When a form demands precisely 295×413 pixels, crop to the right proportion first and resize second. The two-step route lands on exact dimensions without the stretched look of forcing one picture to fit two numbers.
Tips & tricks
- Click the 50% chip for a quick reduction. Both fields fill in automatically, no math needed.
- Enlarging more than two or three times turns visibly blurry. Prefer downscaling, or reshoot with a sharper source.
- Unchecking keep aspect ratio forces exact dimensions but stretches the picture. Reserve it for special layout requirements.
Things to watch
- One-step downscaling leaves artifacts
Collapsing 4000 pixels straight to 400 invites jagged edges and moire patterns that no later step can remove. Halve the image in two or three passes for cleaner sampling, then fine-tune to the exact target on the final step.
- Upscaling interpolates, never restores
Interpolation fills gaps with averages of neighboring pixels; fine textures and letter strokes smear first and worst. When a bigger version is needed, go back to the original capture and resize from there instead of stretching the small file.
- Pixels are not centimeters
Resizing changes pixels, not physical length: a 1200-pixel-wide image prints about 10cm wide at 300 DPI. The same image spans over 40cm at 72 DPI. Decide the print DPI first, then work backward to the pixel dimensions you need.