Resizing an image sounds like one of the simplest tasks in computing, but the right dimensions depend entirely on where the image will end up. A photo that looks great on a website will print blurry at poster size. An image sized for a billboard will crawl across a mobile connection. The key concept that ties everything together is pixel density— how many pixels occupy a physical inch on the output medium.
Pixels, resolution, and DPI
A digital image is a grid of pixels. A 3000×2000 image has 6 million pixels. That's the image's resolution— its absolute dimensions in pixels. Resolution alone doesn't tell you how large the image will appear. That depends on the display.
DPI (dots per inch)— or more precisely PPI (pixels per inch) — describes how many pixels fit into one physical inch. A standard computer monitor displays roughly 96 PPI. A retina MacBook displays about 220 PPI. A quality inkjet print requires 300 DPI. The same 3000×2000 image would appear about 31 inches wide on a 96 PPI monitor but only 10 inches wide in a 300 DPI print.
This is why an image can look sharp on screen but fuzzy in print — the screen is spreading the same pixels over a larger physical area, which works because you view screens from further away. Print is viewed up close, so you need more pixels per inch to avoid seeing individual dots.
Sizing images for the web
On the web, only pixel dimensions matter. DPI metadata in the file is irrelevant — browsers ignore it completely. A 1200px-wide image displays at 1200 CSS pixels regardless of whether the file says 72 DPI or 300 DPI.
Common web image sizes
| Use case | Recommended width | Notes |
|---|---|---|
| Hero / banner image | 1920px (or 2560px for retina) | Full viewport width. Serve responsive sizes. |
| Blog post content image | 800-1200px | Fits most content columns. 1600px for retina. |
| Product photo (e-commerce) | 1000-1500px square | Allows zoom. Square is standard for product grids. |
| Thumbnail / card image | 400-600px | Displayed small. Don't serve a 3000px image for a 300px card. |
| Profile photo / avatar | 200-500px square | Usually displayed at 40-80px. 200px covers retina. |
| OG / social share image | 1200×630px | Facebook/Twitter standard. LinkedIn uses similar. |
| Favicon | 32×32px, 16×16px | Also provide 180×180px apple-touch-icon. |
Retina and high-DPI displays
Modern phones and laptops use high-DPI screens (2x or 3x pixel density). An image displayed at 600 CSS pixels on a 2x retina screen actually renders at 1200 physical pixels. If you only provide a 600px image, it gets upscaled and looks soft.
The standard approach: serve images at 2x the display size. If an image will be shown at 400px wide, provide an 800px source. For hero images that span the full viewport, 2560px covers most retina displays. Use the srcset attribute to let the browser pick the right size automatically.
File size matters more than dimensions
A 2000px-wide JPEG at 80% quality might be 300 KB — that's fine. A 2000px-wide PNG of the same photo might be 6 MB — that's not. Pixel dimensions set the maximum display quality, but file size determines how fast the image loads. Always consider both: resize to the smallest dimensions that meet your quality requirements, then compress in an efficient format (WebP is the best default).
Sizing images for print
Print is a completely different world. DPI matters. The standard for commercial printing is 300 DPI. Some large-format printing (posters viewed from a distance) can get away with 150 DPI. Fine art prints may want 360 DPI or higher.
Calculating print dimensions
The formula is straightforward: Print size (inches) = Pixel dimensions ÷ DPI.
- A 3000×2000px image at 300 DPI prints at 10×6.67 inches.
- A 4000×3000px image at 300 DPI prints at 13.3×10 inches.
- For a 24×36 inch poster at 300 DPI, you need 7200×10800 pixels — that's a 78 megapixel image. Most cameras can't produce this natively, which is why large-format posters often use 150 DPI.
Common print sizes and pixel requirements
| Print size | At 300 DPI | At 150 DPI (large format) |
|---|---|---|
| 4×6" (standard photo) | 1200×1800px | 600×900px |
| 5×7" | 1500×2100px | 750×1050px |
| 8×10" | 2400×3000px | 1200×1500px |
| 8.5×11" (letter) | 2550×3300px | 1275×1650px |
| 11×14" | 3300×4200px | 1650×2100px |
| 16×20" | 4800×6000px | 2400×3000px |
| 24×36" (poster) | 7200×10800px | 3600×5400px |
When you don't have enough pixels
If your image doesn't have enough pixels for the desired print size at 300 DPI, you have three options:
- Print smaller.The simplest solution. If your 2400×1600px image only supports 8×5.3 inches at 300 DPI, print it at that size.
- Accept lower DPI.Dropping to 200 DPI for a photo viewed at arm's length is acceptable. Below 150 DPI, most people start noticing softness.
- AI upscale.Modern AI upscaling (like Real-ESRGAN) can increase resolution 2-4x while adding plausible detail. The result isn't pixel-perfect but it's far better than simple interpolation, which just blurs the image.
Aspect ratios and cropping
Resizing often means changing the aspect ratio to match the target format. A phone photo at 4:3 won't fill a 16:9 banner without cropping. When resizing for a specific format:
- Crop to the target ratio first, then resize to the target pixel dimensions. This gives you control over which part of the image is preserved.
- Don't stretch.Changing the aspect ratio without cropping distorts the image. People and objects look unnaturally compressed or stretched. Always maintain aspect ratio unless you're deliberately cropping.
- Use the “rule of thirds” for crop positioning. Place the subject at a third-line intersection rather than dead center. Automated center-crop works for head shots but often clips important edges on landscape photos.
Interpolation quality
When you resize an image, the software has to calculate new pixel values from the original data. The algorithm used for this — the interpolation method — affects quality:
- Nearest neighbor: picks the closest pixel. Fastest, but produces jagged, blocky results. Good for pixel art where you want to preserve sharp edges, bad for everything else.
- Bilinear: averages the 4 nearest pixels. Smooth but slightly soft. Acceptable for moderate downscaling.
- Bicubic / Lanczos: considers a larger neighborhood of pixels. Produces the sharpest results for photographic content. This is what most quality-conscious tools use, including Photoshop (bicubic sharper for downscaling, bicubic smoother for upscaling).
The browser's Canvas API defaults to bilinear interpolation, but you can get better results by downscaling in steps (halving each time) rather than jumping directly from 4000px to 400px. Most resize tools handle this automatically.
Batch resizing for practical workflows
If you're preparing images for a website, you often need multiple sizes of the same image: a full-size version, a thumbnail, and possibly a social share card version. Rather than resizing manually three times, use a tool that supports batch operations.
For one-off resizing, MakeMyImgs' resize tool handles it directly in your browser. Enter your target dimensions in pixels or as a percentage, toggle aspect ratio lock, and download the resized image. Everything happens client-side — your images stay on your device.
Summary
For web: think in pixels. Match your image dimensions to their display size (with 2x for retina), then compress in WebP. For print: calculate pixels from your target size and DPI (width in inches × 300 = pixels needed). Crop before you resize, never stretch, and use a quality interpolation algorithm. Getting these basics right avoids the two most common problems: oversized images that slow down web pages, and undersized images that print blurry.