Resizing an image sounds like a ten-second task. And technically it is — but done incorrectly, the problems aren't always immediately obvious. An image that looks fine on your screen might be 18MB when it should be 80KB. A portrait photo might look perfect before you add it to a slideshow, then appear stretched and distorted in the presentation. A product photo might look sharp on your laptop and blurry on a retina phone screen. This guide covers the complete picture: what actually happens when you resize, which algorithms produce the best results, what aspect ratio means and why it matters, and how to resize correctly for every common destination — web, email, print, and social media.
These two operations are often conflated because they both change what appears in the final image, but they work in fundamentally different ways:
Resizing changes the pixel dimensions of the entire image. Taking a 4000×3000px photo and making it 1200×900px scales every pixel proportionally — the whole composition stays intact, just smaller. Nothing is removed from the frame; everything is scaled down.
Cropping removes pixels at the edges to change the composition or aspect ratio. A 4000×3000px landscape photo cropped to 3000×3000px removes the sides to produce a square. The remaining pixels are not scaled — they stay at their original resolution, just with a different boundary.
In practice, you often need both operations in sequence, and the order matters. Crop first to establish the composition and shape you need, then resize to the exact pixel dimensions required by the platform or layout. Doing it in reverse — resizing first and then cropping — can leave you with fewer pixels to work with than you intended.
This is the most important conceptual distinction in image resizing, and understanding it prevents the most common quality mistakes.
Scaling down (making an image smaller) is always safe and generally improves subjective sharpness. When you reduce a 4000px-wide image to 1200px, the software averages multiple source pixels into each output pixel. The result has well-defined edges, accurate color, and good detail representation. Some total information is discarded — you can't get back to 4000px without quality loss — but the scaled-down image looks excellent at its new size.
Scaling up (making an image larger) is always a quality compromise. When you increase a 1200px image to 4000px, the software has to invent 3.3 pixels for every 1 original pixel. It does this through interpolation — mathematical estimation of what the in-between pixels should look like based on their neighbors. The visible result is always some degree of softness or blurring, because the invented pixels carry no real information from the original scene.
The degree of quality loss when scaling up depends on how aggressive the increase is. Going from 800px to 900px (12.5% larger) is barely perceptible. Going from 800px to 2400px (3× larger) produces obvious blurriness. The practical rule: never scale up beyond 110–120% if the result needs to look sharp. If you genuinely need a larger image, source a higher-resolution original rather than stretching a small one.
Always keep your originals: Once you've scaled down and saved over the original file, you've permanently discarded the pixel data needed to scale back up without quality loss. Always keep the full-resolution source and create resized copies — never replace the original with a smaller version.
When software resizes an image, it uses a resampling algorithm to calculate what color each pixel in the new image should be. The choice of algorithm affects both the visual quality of the result and how long the process takes:
For most users and most situations, bicubic is the right default. Use Lanczos for high-quality downscaling when your tool supports it, and reserve Nearest Neighbor for pixel art only.
The aspect ratio is the proportional relationship between an image's width and height, expressed as width:height. It determines the shape of the image — how wide or tall it appears — independently of its actual pixel dimensions.
Common ratios and where you encounter them:
If you change an image's dimensions to a different aspect ratio than its original without cropping first, the image will appear distorted — stretched horizontally, squashed vertically, or both. The fix is always to crop to the target ratio first, then scale to the required pixel dimensions. Most resize tools include a "lock aspect ratio" option (typically a padlock icon between the width and height fields). Keep this locked unless you're intentionally changing the shape, and crop before resizing when a shape change is needed.
The web is where improper resizing has the largest practical impact, on both page performance and user experience. The core rule — never serve an image larger than it will be displayed — sounds simple but is violated constantly, often because the original photo comes from a camera at 6000px wide and the developer uploads it without resizing.
Recommended dimensions by web use case:
For retina and HiDPI displays — which now include virtually all smartphones and most modern laptops — images need to be served at approximately 2× the CSS display size to appear sharp. If an image is displayed at 400px wide in your CSS layout, serve an 800px image. The browser displays it at 400px but with double the pixel density, which is what makes it crisp on high-resolution screens.
A common mistake: uploading a 6000×4000px photo and setting max-width: 800px in CSS. The CSS controls how the image is displayed — but the browser still downloads every pixel of the 6000px file and scales it down in memory before rendering. The file might be 5–8MB instead of 18MB raw, but it's still many times larger than necessary. Resize the file to 1600px wide (2× the 800px display width) before upload, then compress. That same image becomes approximately 150–200KB — a 40× reduction in what the visitor's browser actually downloads.
Email is a distinct environment with stricter constraints than the web:
Width limit: Most email clients render content in a column 500–700px wide. Images wider than 600px will be scaled down by the email client, sometimes gracefully and sometimes with visible quality degradation depending on the client's rendering engine. The safest maximum image width for email is 600px, scaled so it displays at 600px with no additional CSS scaling needed.
File size: Large images in email create two problems. First, Gmail clips messages above approximately 102KB of total HTML and inline content — clipped messages hide everything below the fold behind a "View entire message" link, which most recipients never click. Second, emails with large image weights are more likely to land in spam filters. Target under 500KB total across all images in an email, and under 150KB for any single banner or hero image.
Retina in email: Many email clients on mobile render at 2× density. The practical approach is to size images at 2× their display width (so a 600px-wide email uses a 1200px image in the HTML but sets width="600" in the img tag), then compress aggressively to keep file size manageable at the larger pixel count.
Product images in email grids: For product grids with multiple images per row, 400×400px per image is standard for a 2-column grid in a 600px email. Compress to under 80KB each.
Print is where screen-oriented designers most often get caught out. Screen resolution and print resolution are measured differently, and the numbers are very far apart.
DPI (dots per inch) describes how many ink dots a printer lays down per linear inch of paper. More dots means finer detail. The professional standard for crisp, detailed print is 300 DPI. Below 150 DPI, prints start looking noticeably soft at typical reading distances.
Screen images are typically saved at 72 PPI (pixels per inch) — which reflects how many pixels a screen displays per inch of its surface. A 72 PPI image printed at 72 DPI would look sharp, but at 300 DPI it would be tiny. The confusion arises because people try to print 72 PPI images at large sizes, which requires the printer to stretch far too few pixels across too many inches.
The formula to calculate required pixel dimensions for print is: print size in inches × DPI = pixels needed.
| Print size | At 300 DPI | At 150 DPI |
|---|---|---|
| 4 × 6 inch | 1200 × 1800 px | 600 × 900 px |
| 5 × 7 inch | 1500 × 2100 px | 750 × 1050 px |
| 8 × 10 inch | 2400 × 3000 px | 1200 × 1500 px |
| A4 (8.27 × 11.69 inch) | 2481 × 3508 px | 1240 × 1754 px |
| 16 × 20 inch poster | 4800 × 6000 px | 2400 × 3000 px |
This is why modern 12–48MP smartphone cameras produce excellent 4×6 prints (their pixel counts work out to 300+ DPI at that size) but only marginal quality at large poster sizes. A 12MP image (4032×3024px) runs out of resolution at roughly 13×10 inches at 300 DPI. For large-format print, source the highest-resolution original available and don't scale up.
Social media platforms apply their own compression when you upload an image. If your image is already slightly off-spec or over-compressed before uploading, the platform's recompression multiplies the quality loss. Uploading at exact target dimensions prevents the platform from needing to scale your image, which minimizes what the platform's encoder has to change.
| Platform & format | Recommended dimensions |
|---|---|
| Instagram square post | 1080 × 1080 px |
| Instagram portrait post | 1080 × 1350 px (4:5 ratio) |
| Instagram Stories / Reels | 1080 × 1920 px (9:16) |
| Facebook post image | 1200 × 630 px |
| Facebook cover photo | 851 × 315 px |
| Twitter/X in-stream image | 1600 × 900 px (16:9) |
| Twitter/X profile picture | 400 × 400 px |
| LinkedIn post image | 1200 × 627 px |
| YouTube thumbnail | 1280 × 720 px |
| YouTube channel art | 2560 × 1440 px |
The Instagram portrait post ratio (4:5 — taller than square, shorter than Stories) is worth highlighting. A 4:5 post occupies more vertical screen space in the feed than a square post, which means more of the viewer's attention before they scroll past. For photography and product shots that suit a portrait composition, 1080×1350px outperforms the square format on most accounts.
inktools.tech/image-resizer/ provides a straightforward browser-based resizing tool with no account sign-up and no file size restrictions for typical photos:
The tool shows you the original and output file size before you download, so you can verify the savings before committing to the result. If you're also planning to compress the image — reducing the JPG or WebP quality further — always resize first, then compress. Running compression on an oversized image wastes compression effort on pixels you're going to discard anyway.
Resizing and compression are two separate operations that work best together, in a specific order. This combined workflow is the single most impactful image optimization step available for most people.
Why order matters: If you compress a 6000×4000px photo at 80% JPG quality, you get a smaller file — but it's still a 24 megapixel image. When the browser renders it at 1200×800px, it downloads all 24MP of data, decodes it in memory, and then scales it down. The file might be 3MB instead of 18MB raw, but it's still 15–20× larger than necessary. Resizing first eliminates those pixels before any compression is applied.
The correct workflow:
Real numbers: A 6000×4000px photo from a modern smartphone is typically 18–25MB as a raw file or 5–8MB as a camera JPEG. Resized to 1200×800px and saved as WebP at 80% quality, it becomes approximately 70–90KB. That is a 95–99% reduction in file weight, with no perceptible quality loss at the size the image is displayed at. This is the resize + compress workflow working as intended.
Resize images to any dimensions free — right in your browser, no sign-up needed.
Resize images free →