What This Tool Does
This image resizer changes the pixel dimensions of JPG, PNG, WebP, and GIF images while optionally preserving aspect ratio. You can enter exact pixel values or a percentage. Everything runs in your browser using Canvas — your images stay on your device.
Inputs Explained
- Image File: JPG, PNG, WebP, or GIF (up to 20 MB).
- Mode: Pixel dimensions or percentage.
- Width & Height: New dimensions. With 'Keep aspect ratio' enabled, editing one updates the other.
- Quality: For JPG/WebP output. PNG is always lossless.
How It Works
The image is drawn onto a new Canvas with the target dimensions using high-quality bilinear interpolation. The resized canvas is exported as a Blob in your chosen format. Aspect ratio is maintained by scaling both dimensions proportionally.
Formula / Logic Used
Image Resizer
Resize any image by pixel dimensions or percentage with aspect ratio lock.
Step-by-Step Example
Common resize targets:
- Social media avatar: 150×150 or 300×300 px
- Twitter/Facebook post: 1200×675 px
- Instagram feed: 1080×1080 (square) or 1080×1350 (portrait)
- LinkedIn banner: 1584×396 px
- WhatsApp profile: 500×500 px
- Blog hero: 1920×1080 px
To scale a 4000×3000 photo down to 50% → enter 50% in percentage mode, or 2000×1500 in pixel mode.
Use Cases
- Social media posts: Resize photos to exact dimensions each platform prefers for best display.
- Email newsletters: Keep image widths under 600px for reliable rendering across all email clients.
- Website optimization: Serve appropriately sized images — don't load 4K photos for thumbnail spots.
- Print preparation: Downscale high-res photos to target print dimensions while maintaining aspect ratio.
- Storage saving: Reduce the dimensions (not just quality) of vacation photos before archiving.
Assumptions and Limitations
- Upscaling (making images larger than original) produces blurry results. For AI-based upscaling, use dedicated tools like Topaz or waifu2x.
- Maximum output dimensions depend on browser memory — typically 8000×8000 works, but varies by device.
- Canvas resizing uses bilinear interpolation. For highest quality downscaling, specialized algorithms (Lanczos, bicubic) produce slightly better results.
- Aspect ratio lock uses your currently entered width/height ratio as reference — change the original image's ratio by unlocking first.
Frequently Asked Questions
What's the difference between resize and compress?
Resize changes pixel dimensions (e.g., 4000×3000 → 2000×1500). Compress changes file size at the same dimensions by lossy encoding. For maximum file size savings, do both: resize down AND lower JPG quality.
Will resizing lose quality?
Downscaling loses detail because fewer pixels represent the image. Upscaling is worse — it invents detail that wasn't there. Always start from the highest resolution you have and downscale to your target.
How do I keep aspect ratio?
Enable the 'Keep aspect ratio' checkbox. Then editing the width will automatically update the height (or vice versa) to preserve the proportions of the original image.
What's a good resolution for web images?
2× the display size is typical for Retina screens. For a hero that displays at 960px wide, use 1920px images. For thumbnails shown at 300px, use 600px. Balance sharpness against file size.
Can I upscale a small image?
Technically yes, but the result will be blurry. Canvas upscaling multiplies pixels without adding detail. For real upscaling, use AI tools like Upscayl (free), Topaz Gigapixel, or waifu2x (for anime/art).
Does resizing strip EXIF metadata?
Canvas-based resizing removes EXIF data (camera model, GPS, shooting date). This is often desirable for privacy when sharing photos. If you need to preserve EXIF, use specialized tools.
What format should I output?
JPG for photos (smallest, lossy, no transparency). PNG for graphics with transparency or sharp edges (lossless). WebP is smaller than both at equal quality but requires modern browser support.
Is my image uploaded to a server?
No. The resize happens entirely in your browser using Canvas APIs. Your image file never leaves your device. You can even use this tool offline once the page has loaded.
Sources and References
- MDN — CanvasRenderingContext2D.drawImage — Core Canvas API used for resizing.
- MDN — imageSmoothingQuality — Controls interpolation quality when scaling.
- web.dev — Serve responsive images — Best practices for sizing images for web.
- MDN — FileReader API — Browser API for reading uploaded files.