Resize Images
Resize Images
Resize by width/height or percentage while preserving aspect ratio.
Choosing Dimensions
Pick a longest side based on use: thumbnails ~400–800px, inline blog ~800–1200px, hero 1400–2000px.
Keep aspect ratio locked unless you need a specific crop.
Sharp Results
- Downscale in one step when possible; tiny changes add up.
- Avoid repeated resizes; keep an
originals/copy. - If available, apply light sharpening after a big downscale.
Aspect Ratio & Cropping
- Square posts: 1:1 (1080×1080).
- Widescreen: 16:9 (e.g., 1600×900).
- Portrait stories: 9:16 (1080×1920).
Common Questions
- Is processing local? Most edits run in your browser; if a server is needed, the page will note it.
- Do you keep my images? No—downloads save to your device and previews clear on tab close.
- Which format should I pick? Photos → WEBP/JPG; transparency/line art → PNG; icons/logos → PNG/WEBP.
Updated Oct 01, 2025
Platform Targets (Handy Presets)
- Instagram square: 1080×1080 • portrait: 1080×1350 • story: 1080×1920
- YouTube thumbnail: 1280×720 (16:9)
- Blog inline: 1000–1200 px longest side • Hero: 1600–2000 px
Preventing Blur
- Avoid upscaling; if necessary, keep it under 20% and sharpen lightly.
- Resize once; multiple passes compound artifacts.
- Export to WEBP/JPG after resize; don’t resize a heavily compressed source.
Tip: Need exact crop? Lock aspect ratio, crop first, then resize for pixel‑perfect results.
Updated Oct 01, 2025
When resizing is the right choice
Resizing adjusts pixel dimensions so images fit a specific layout or container.
It should be done before compression for best quality.
- Match display size
- Keep aspect ratio
- Avoid upscaling
Page-specific details
This resize tool is best when your image is “too large in pixels” or doesn’t fit a target slot. If you only need the file to be smaller in megabytes, use the Compress tool instead.
If your target platform provides exact dimensions, match them. When no dimensions are provided, a safe web default is exporting at the largest size your layout will display (so you aren’t sending extra pixels).
Resize settings that actually matter
Resizing is about pixel geometry. A site can show a 3000px-wide image inside a 900px container, but it still downloads the full file unless you resize it first.
If your tool offers “maintain aspect ratio,” keep it on unless you intentionally want distortion. For social graphics, consistent ratios (1:1, 4:5, 16:9) help layouts look professional.
Upscaling (making an image larger than its original pixel dimensions) usually produces softness. If you must upscale, expect reduced clarity.
Quick checklist
- Resize for the largest size you will display
- Keep aspect ratio unless you’re cropping intentionally
- Don’t upscale small images for print
Examples
| Use | Common ratio | Why it helps |
|---|---|---|
| Profile/Grid | 1:1 | Consistent tiles |
| Feed post | 4:5 | Uses more vertical space |
| Video thumbnail | 16:9 | Matches widescreen players |
Resize targets that match common platforms
Resizing is easiest when you aim for a known destination. If the platform gives a recommended size, follow it; otherwise, export close to the largest size the image will appear on screen so you don’t ship extra pixels.
| Destination | Good starting width | Reason |
|---|---|---|
| Website content | 1200–1800px | Clear on desktop without huge files |
| Open Graph preview | 1200px | Reliable social preview sizing |
| Email newsletter | 600–1200px | Balances clarity and deliverability |
Keep it clean
- Prefer downsizing over upsizing—upscaling rarely looks sharp.
- Maintain aspect ratio unless the destination demands a crop.
- After resizing, compress once to reduce MB without reworking dimensions.
Choosing dimensions without guesswork
If you don’t have exact requirements, you can still pick smart sizes. Look at where the image will appear: a blog column, a product gallery, or a hero banner. Export close to that size so the browser isn’t forced to scale drastically.
When an image is displayed at multiple sizes (desktop vs mobile), prioritize the desktop width, then compress to keep the file lightweight for phones.
Quick sizing heuristics
- Blog/content images: pick a width that matches your article column
- Product shots: keep consistent ratio across the catalog
- Background/hero: size for wide screens, then compress carefully
Aspect ratio: the hidden reason images “look wrong”
If an image is the correct width but still looks awkward, the aspect ratio is usually the culprit. Social posts, banners, and product grids all assume certain shapes.
When you force a mismatched ratio, a site will either crop the image or stretch it. Keeping the correct ratio prevents those surprises.
Quick ratio reminders
- Square grids: consistent 1:1 exports keep tiles aligned.
- Banners: wider ratios reduce cropping in headers.
- Listings: consistent ratio improves catalog uniformity.
Resizing for clarity, not just size
A resized image can be “correct” but still look off if the new dimensions force the browser to scale it again. The clean target is: export at (or slightly above) the largest size it will actually be displayed.
When you should export larger than the display size
- High-DPI layouts: if your site uses crisp UI and sharp photos, a slightly larger export can look cleaner.
- Zoom-heavy content: charts, infographics, and diagrams benefit from extra pixels.
If the image is meant to be tapped and zoomed (menus, flyers), prioritize legibility first, then compress gently to keep it shareable.
Photographer sizing tips for galleries
Galleries often show images at a fixed column width. When you export near that width, you prevent the site from doing heavy downscaling and you get more predictable sharpness. For retina-style displays, a slightly larger export can look cleaner—especially for fine hair and fabric.
- Export “display width” for standard screens, and a modestly larger width for high-DPI layouts.
- Keep crops consistent across a set so your portfolio grid looks intentional.
Preventing layout shift on websites
If you publish images on a website, provide consistent dimensions for repeated components like cards and grids. When images jump during load, it’s usually because the layout didn’t reserve space—consistent sizing makes pages feel smoother.
Resize scenarios photographers actually run into
When photographers export selects, the mistake is shipping huge originals for web galleries. A tighter export loads faster and still looks sharp because viewers can’t see extra pixels that never display.
Common resize situations
- Client gallery previews: export a web-friendly size and keep full-res separately for delivery.
- Before/after edits: use the same dimensions so comparisons are fair and clean.
- Watermarked sets: finalize watermark placement first, then resize so it scales correctly.
If an image looks soft after resizing, confirm the destination isn’t enlarging it beyond your export size.
Sizing cheatsheet for common layouts
If you don’t know the “right” pixel size, measure the slot where the image will appear. For websites, you can often right-click and inspect the layout width or check the CSS/container size.
Common layout widths (practical)
- Article images: match the content column width.
- Card thumbnails: keep a consistent ratio so grids align.
- Hero banners: export wide, then compress carefully for speed.
Resizing is also the best way to reduce file size without sacrificing quality—fewer pixels usually means you can compress less aggressively.
Related: If you’re comparing tools, see the full guide: Edit Image Online.
| Use case | Width | Height | Notes |
|---|---|---|---|
| Instagram square | 1080px | 1080px | 1:1 ratio |
| Instagram portrait | 1080px | 1350px | 4:5 ratio |
| Twitter/X card | 1200px | 675px | 16:9 ratio |
| YouTube thumbnail | 1280px | 720px | 16:9 ratio |
| Facebook post | 1200px | 630px | ~1.91:1 ratio |
| Website full-width | 1920px | Varies | Scale to fit |
| Email header | 600px | Varies | Keep under 100 KB |
Frequently Asked Questions
Does resizing an image reduce quality?
Scaling an image down (making it smaller) generally preserves quality well using good resampling algorithms. Scaling an image up (making it larger than the original) always reduces quality because you are creating pixels that weren't there — this is called upscaling or interpolation and produces softness or blur. For best results, always start with the largest version of an image and scale down to your target size.
What is aspect ratio lock and why does it matter?
Aspect ratio is the proportional relationship between an image's width and height. Locking the aspect ratio means when you change one dimension, the other adjusts automatically to keep the image proportions intact. Unlocking it lets you set width and height independently, which can stretch or squish the image. For most use cases — profile photos, product images, social posts — you want aspect ratio locked to avoid distortion.
What dimensions should I use for social media images?
Common social media image dimensions in 2025: Instagram square 1080×1080px, Instagram portrait 1080×1350px, Instagram story/reel 1080×1920px, Facebook post 1200×630px, Twitter/X card 1200×675px, LinkedIn post 1200×627px, YouTube thumbnail 1280×720px. When in doubt, use the largest recommended dimension — platforms will scale down but won't scale up without quality loss.
Can I resize multiple images at once?
This tool processes one image at a time for simplicity and privacy. For batch resizing of many images, you can open multiple browser tabs with the tool running in each, or use a desktop application like GIMP (free) or Photoshop for large batch jobs. Each resize runs locally so there's no server load limit on how many you process.
What is the best image size for a website?
For full-width web images: 1200–1920px wide is typical for modern screens. For article body images: 800–1200px wide. For thumbnails: 300–600px. Always compress after resizing — a 1200px wide JPEG at 80% quality should be under 200 KB for most photos. Images larger than 200–300 KB significantly impact page load time and Core Web Vitals scores.