Resolution: The Pixel Count
Resolution, in its technically correct sense, is the total number of pixels in an image. A 3000×2000 pixel image contains 6 million pixels — 6 megapixels. This number is fixed: it's a property of the image data itself, independent of how the image is displayed or printed.
On screen, resolution is the only thing that matters. When you display a 3000×2000 image in a browser at its natural size, the browser maps one image pixel to one screen pixel. The image will be as large as the screen is wide (or larger). When you display it inside a 600 px wide CSS container, the browser scales it down — all 6 million pixels are still there in the file, but only 600×400 of them are rendered on screen.
This is why you often hear "resize for web" as advice. A 3000 px wide image in a 600 px container doesn't look better than a 600 px wide image in the same container — it just downloads six times more data for no visible benefit. Resolution and display size are decoupled.
DPI: Dots Per Inch at Print Time
DPI — dots per inch — only becomes meaningful when you're printing. It describes the density of ink dots per linear inch on the printed output. 300 DPI means 300 dots per inch, resulting in fine detail that the naked eye cannot resolve at normal viewing distance.
Common DPI targets by use case: 72 DPI is the historical default for screen display (derived from early Mac monitor dot pitch). 96 DPI is the default display DPI on Windows. 150 DPI is sufficient for large-format prints viewed from more than an arm's length away — posters, banners, exhibition panels. 300 DPI is the standard for photographic prints, books, and professional press work. 600 DPI and above is used for fine-detail printing: technical drawings, maps, postage stamps.
Beyond 300 DPI, the human eye cannot distinguish individual dots at normal viewing distance (~12 inches). Going to 600 DPI doesn't improve perceived sharpness on a standard print; it doubles the file size and processing time with no visual return.
Why Changing DPI Doesn't Change File Size
This is one of the most persistent misconceptions in digital imaging. DPI is a metadata value — four bytes stored in the image file's header (in EXIF or JFIF metadata). It tells the printer or print driver at what density to place pixels on paper. It has zero effect on the actual pixel data.
If you take a 3000×2000 pixel image saved at 72 DPI and change the DPI metadata to 300 — without resampling the pixels — you get a 3000×2000 pixel image saved at 300 DPI. The file size is identical. The on-screen display is identical. The only change is the instruction to the printer: now it will print those same pixels at 300 DPI, producing a smaller, sharper physical print (10×6.67 inches instead of 41.67×27.78 inches at 72 DPI).
When people say "I changed the DPI and now my image is blurry," what actually happened is that they used their software's "change DPI" function which also resampled — reduced the pixel count to match the new DPI setting at a fixed page size. That's a different operation, and it does change the file.
Practical Rules by Use Case
For a website, target 72–96 DPI and size the image to match the CSS container. A hero image 1440 px wide at 72 DPI is correct. A 5000×3000 px image at 300 DPI in a web page is wasteful — the DPI label is irrelevant, and the pixel excess just means a slower download.
For a printed 4×6 inch photo at 300 DPI, you need 1200×1800 pixels. If your phone photo is 4000×3000 px, you have far more than enough resolution — downscaling to 1200×1800 px before printing removes excess data while maintaining full print quality.
For a 20×28 inch poster viewed from three feet away, 150 DPI is sufficient and requires approximately 3000×4200 pixels — well within reach of any modern smartphone. You don't need a medium-format camera for a poster; you need the right DPI target for the viewing distance. Printing at 300 DPI on the same poster doubles the file size with no perceptible quality improvement at normal viewing distance.