Last updated
Tips for Best Results
- Always resize from the original high-resolution source — resizing an already-compressed image degrades quality faster
- Maintain aspect ratio unless you specifically need a different ratio — distorted images look unprofessional
- For square thumbnails, use center crop mode to preserve the most important part of the image
- Resize to the display size — a 1200px image displayed at 400px wastes 3× the bandwidth
- Combine resizing with format conversion (e.g., resize PNG to JPEG) to maximize file size reduction
- For retina/HiDPI displays, generate images at 2× the CSS display size (e.g., 800px image for a 400px slot)
All resizing happens in your browser using the Canvas API. Your images are never uploaded to any server.
Examples
Example 1: Common Resize Operations
Resize to specific dimensions:
Input: photo.jpg (4000×3000px, 3.2 MB)
Output: photo.jpg (1200×900px, 145 KB)
Settings: Width=1200, Height=900, Maintain aspect ratio=ON
Resize by percentage:
Input: banner.png (2400×800px)
Output: banner.png (1200×400px) — 50% of original
Settings: Scale=50%
Resize to max width (height auto):
Input: portrait.jpg (1080×1920px)
Output: portrait.jpg (800×1422px)
Settings: Max width=800, Height=auto (aspect ratio preserved)
Resize to max height (width auto):
Input: landscape.jpg (3840×2160px)
Output: landscape.jpg (1422×800px)
Settings: Width=auto, Max height=800
Example 2: Social Media Image Sizes
Platform-specific resize targets:
Instagram:
Square post: 1080×1080px
Portrait post: 1080×1350px
Landscape post: 1080×566px
Story/Reel: 1080×1920px
Facebook:
Profile photo: 180×180px (displays at 170×170)
Cover photo: 820×312px
Post image: 1200×630px
Event cover: 1920×1005px
Twitter/X:
Profile photo: 400×400px
Header image: 1500×500px
In-tweet image: 1200×675px
LinkedIn:
Profile photo: 400×400px
Banner: 1584×396px
Post image: 1200×627px
YouTube:
Channel art: 2560×1440px
Thumbnail: 1280×720px
Example 3: Batch Resize for a Website
Resizing product images for an e-commerce site:
Requirements:
- Hero image: 1440×600px
- Product detail: 800×800px
- Product thumbnail: 300×300px
- Cart thumbnail: 80×80px
Workflow:
1. Upload all product photos (original: ~3000×3000px each)
2. Set output: 800×800px, quality 85, JPEG
3. Batch process all images
4. Download ZIP with all resized images
Before: 25 images × avg 4 MB = 100 MB total
After: 25 images × avg 85 KB = 2.1 MB total
Reduction: 98% — dramatically faster page loads