"What resolution do I need?" is one of the most confusing questions in digital imaging. Should it be 72 DPI or 300 DPI? How many pixels? Does DPI even matter for web?
This guide clears up the confusion once and for all.
TL;DR - Quick Answers
DPI doesn't matter - only pixel dimensions count. Use 2x your display size for retina.
300 DPI at final print size. Large formats (banners) can use 150 DPI.
Key Terms Explained
đ Resolution
The total number of pixels in an image, expressed as width à height.
Example: 1920Ã1080 = 2,073,600 pixels (about 2 megapixels)
đĩ Pixel
The smallest unit of a digital image. A single dot of color.
Every digital image is made up of a grid of pixels.
đ¨ī¸ DPI (Dots Per Inch)
How many ink dots a printer places per inch. Only relevant for printing.
Higher DPI = smaller dots = finer detail in print.
đģ PPI (Pixels Per Inch)
How many pixels fit in one inch on a screen. Describes display density.
iPhone 15: 460 PPI. Standard monitor: ~100 PPI.
The Big Myth: 72 DPI for Web
â ī¸ Myth Busted
"Web images should be 72 DPI" - This is outdated advice from the 1990s.
Reality: Browsers ignore DPI completely. A 1000Ã1000 pixel image is the same file whether it's set to 72 DPI, 300 DPI, or 1000 DPI. The DPI metadata changes nothing for web display.
Why DPI Doesn't Matter for Web
Image A: 800Ã600 pixels @ 72 DPI
Image B: 800Ã600 pixels @ 300 DPI
â Same file size
â Same display size on web
â Same quality
The DPI setting is just metadata - the actual pixels are identical.What actually matters for web: The pixel dimensions (width à height).
Resolution for Web: The Real Guide
| Use Case | Standard Display | Retina/HiDPI (2x) |
|---|---|---|
| Full-width hero image | 1920px wide | 3840px wide |
| Blog content image | 800px wide | 1600px wide |
| Product thumbnail | 300Ã300px | 600Ã600px |
| Product detail image | 800Ã800px | 1600Ã1600px |
| Logo | 200-400px | 400-800px (or SVG) |
| Favicon | 16, 32, 180, 192, 512px (multiple sizes) | |
Understanding Retina/HiDPI Displays
Why 2x Matters
Retina displays pack 2x (or more) pixels into the same physical space. An image that looks fine on a standard display looks blurry on retina if not sized correctly.
Standard Display (1x)
100px CSS width = 100 physical pixels
Retina Display (2x)
100px CSS width = 200 physical pixels
Solution: Serve images at 2x their CSS dimensions. A 400Ã400px image displayed at 200Ã200px CSS looks sharp on retina.
Resolution for Print
Print is where DPI actually matters. The formula is simple:
đ Print Resolution Formula
Pixels Needed = Print Size (inches) Ã DPI
Example: For an 8Ã10 inch print at 300 DPI:
8" Ã 300 = 2400 pixels wide
10" Ã 300 = 3000 pixels tall
Recommended DPI by Print Type
| Print Type | Minimum DPI | Recommended |
|---|---|---|
| Photo prints (small) | 240 | 300 |
| Magazine/brochure | 300 | 300 |
| Business cards | 300 | 300-350 |
| Poster (viewed close) | 200 | 300 |
| Large poster (3ft+) | 100 | 150 |
| Billboard | 20-50 | 50-100 |
| Canvas art print | 150 | 200-300 |
Print Size Calculator
Quick Reference: Pixels Needed for Common Print Sizes @ 300 DPI
Social Media Image Sizes (2025)
| Platform | Image Type | Size (pixels) | Aspect Ratio |
|---|---|---|---|
| Square post | 1080Ã1080 | 1:1 | |
| Portrait post | 1080Ã1350 | 4:5 | |
| Story/Reel | 1080Ã1920 | 9:16 | |
| Post image | 1200Ã630 | 1.91:1 | |
| Cover photo | 820Ã312 | 2.63:1 | |
| Twitter/X | Post image | 1200Ã675 | 16:9 |
| Header | 1500Ã500 | 3:1 | |
| Post image | 1200Ã627 | 1.91:1 | |
| Pin image | 1000Ã1500 | 2:3 | |
| YouTube | Thumbnail | 1280Ã720 | 16:9 |
How to Check & Change Image Resolution
In Photoshop
- Image â Image Size (Alt+Ctrl+I / Opt+Cmd+I)
- View pixel dimensions at top
- Change resolution/DPI in lower section
- Uncheck "Resample" to only change DPI without affecting pixels
In Preview (Mac)
- Tools â Adjust Size
- View dimensions and resolution
- Uncheck "Resample image" to change DPI only
In GIMP (Free)
- Image â Scale Image
- View pixel dimensions
- Image â Print Size to change DPI without resampling
Online Tools
- Photopea - Free Photoshop alternative
- Squoosh - Resize and see results instantly
Common Resolution Questions
Q: Can I increase resolution of a low-res image?
A: Not really. You can make it larger, but you can't add detail that wasn't captured. AI upscalers can help somewhat, but they're adding AI-guessed detail, not recovering original information.
Q: Why does my image look blurry when zoomed in?
A: You're seeing the individual pixels. Every digital image looks pixelated when zoomed far enough. This is normal - view at 100% zoom for accurate quality assessment.
Q: Should I save images at 300 DPI for web?
A: It doesn't matter. DPI is ignored by browsers. Only pixel dimensions affect web display. However, if users might download and print images, 300 DPI metadata doesn't hurt.
Q: What resolution does my phone camera shoot?
A: Modern phones shoot 12-200MP. A 12MP photo is roughly 4000Ã3000 pixels - enough for a 13Ã10 inch print at 300 DPI.
Resolution Quick Reference Chart
Camera Megapixels â Print Size @ 300 DPI
After Removing Background: Resolution Tips
When you remove an image background, maintain resolution by:
- Starting with high-res originals - You can't improve what you start with
- Avoiding multiple saves - Each JPG save loses quality
- Saving as PNG - Lossless, preserves all pixels
- Checking output dimensions - Make sure they meet your needs
High-Resolution Background Removal
ShotBG preserves your original image resolution. Upload high-res, get high-res results - perfect for both web and print.
- â Full resolution preservation
- â Up to 25 megapixel support
- â Print-ready output
Summary
| Context | What Matters | Recommendation |
|---|---|---|
| Web | Pixel dimensions only | 2x your CSS display size for retina |
| Pixel dimensions + DPI | 300 DPI at final print size | |
| Social | Platform-specific sizes | Follow each platform's guidelines |
| Balance size/quality | 600-800px wide, compressed |
Remember:
- DPI only matters for print
- More pixels = more detail = larger files
- You can reduce resolution, but can't truly increase it
- Always start with the highest quality original
