When you're preparing images for the web — whether it's for a portfolio, blog, or online store — terms like “resolution” and “DPI” can cause confusion.
Good news: you don’t need high DPI, and file size often matters more than pixel count.
Let’s break down what resolution means online and how to make your images look great on any screen.
DPI Doesn’t Matter on the Web
Digital screens display images based on pixels, not print dots. So the DPI (or PPI) setting inside your file is completely ignored by browsers.
- A 2000px-wide image at 72 DPI looks exactly the same as one at 300 DPI
- The key metric is pixel dimensions, not DPI
You can ignore DPI entirely when saving images for online use.
What Resolution Should Web Images Be?
This depends on the context — but here are common guidelines:
| Use Case | Recommended Width (px) |
|---|---|
| Full-width banner | 1600–2400 |
| Large hero image | 1200–1800 |
| Blog post image | 800–1200 |
| Thumbnail or card | 400–800 |
| Icon or logo | 100–400 |
Use 2× the expected display size for high-DPI (retina) displays when needed. For example:
- A 600px-wide display element → export the image at 1200px wide
Don’t Upload Huge Files
Uploading a 5000px-wide image when your layout only displays it at 800px wide slows down your site and doesn’t improve quality.
Tips:
- Resize images before uploading
- Use responsive image tags (
<img srcset>or picture elements) - Consider WebP or AVIF formats to save bandwidth
Compression for Web Use
Use lossy compression to reduce file size with minimal visible loss.
| Format | Use Case | Notes |
|---|---|---|
| JPG | Photos, general-purpose images | 75–85% quality is a good balance |
| PNG | Graphics with transparency | Lossless, but often large |
| WebP | Photos + transparency | Smaller files, good quality |
| AVIF | Modern browsers, smallest files | Best compression, slower encode |
Tools like ImageMagick, Squoosh, or TinyPNG let you control compression levels without needing a full editor.
Export Checklist for Web Images
- Resize to the appropriate width in pixels
- Ignore or leave DPI at any value (doesn’t matter)
- Compress for smaller file size (75–85% for JPGs)
- Use modern formats (WebP, AVIF) when supported
- Name files clearly (helps SEO and accessibility)
Summary
You don’t need high DPI or massive images for the web. What matters is pixel dimensions, file size, and clarity at the size the image will actually be seen.
- Resize your images to the right pixel width
- Use lossy compression to reduce file size
- Skip worrying about DPI entirely
This keeps your website fast, sharp, and user-friendly — without sacrificing image quality.