Does DPI matter for web images?
No. DPI (dots per inch), or more precisely PPI (pixels per inch) for digital images, is an instruction for printing: it says how many of the image's pixels should fit into one printed inch. Browsers ignore it for ordinary images and size them by their pixel dimensions and your CSS. An image 1600 pixels wide shown in an 800 px column looks identical whether its DPI field says 72 or 300, and it costs the visitor exactly the same bytes. Size web images in pixels, using the recommended image sizes.
Why doesn't changing the DPI change the file size?
Because the DPI is just a pair of numbers in the file header. Change it without resampling and only the implied print size moves: the pixels, the file size and the look on screen stay exactly the same. The confusion comes from editors that resample at the same time. In Photoshop's Image > Image Size, raising the resolution from 72 to 300 with Resample checked keeps the print size and multiplies the pixel count by about 17, which is what makes the file bigger. With Resample unchecked, nothing about the image changes except the label.
The same image with three DPI values
| DPI field | Pixel size | File size | Size on screen | Print size |
|---|---|---|---|---|
| 72 | 1600 × 1200 | 320 KB | Same | 22.2 × 16.7 in |
| 96 | 1600 × 1200 | 320 KB | Same | 16.7 × 12.5 in |
| 300 | 1600 × 1200 | 320 KB | Same | 5.3 × 4 in |
Where does the 72 DPI rule come from?
From the 1984 Macintosh, whose screen showed 72 pixels per inch so that one pixel matched one typographic point. Windows later assumed 96. Today's screens range from about 100 pixels per inch on budget monitors to over 450 on phones, and operating systems scale everything with a device pixel ratio, so no single DPI describes the web. The “save for web at 72 DPI” advice survives in old tutorials and export presets, but it never made images smaller on its own: the pixel dimensions did.
What controls how big an image looks on screen?
The CSS size (or the width attribute) decides how many CSS pixels the image occupies. Without either, the browser shows it at its pixel width in CSS pixels. On a 2× screen, each CSS pixel is 2 × 2 device pixels, so an image displayed at 800 CSS px needs 1600 real pixels to look sharp. That is the logic behind exporting at twice the displayed width, explained in Retina images and WebP.
When does DPI matter? Printing
On paper, the pixels have to cover a physical size, and the formula is pixels = inches × DPI. 300 DPI is the usual standard for photos and documents viewed at reading distance; 150–200 DPI is often enough for posters seen from a few feet away, because the eye cannot resolve finer dots at that distance.
Pixels needed for common print sizes
| Print size | Pixels at 300 DPI | Megapixels | Pixels at 150 DPI |
|---|---|---|---|
| Wallet, 2.5 × 3.5 in | 750 × 1050 | 0.8 MP | 375 × 525 |
| 4 × 6 in (about 10 × 15 cm) | 1200 × 1800 | 2.2 MP | 600 × 900 |
| 5 × 7 in | 1500 × 2100 | 3.2 MP | 750 × 1050 |
| 8 × 10 in | 2400 × 3000 | 7.2 MP | 1200 × 1500 |
| US Letter, 8.5 × 11 in | 2550 × 3300 | 8.4 MP | 1275 × 1650 |
| A4, 210 × 297 mm | 2480 × 3508 | 8.7 MP | 1240 × 1754 |
| 11 × 14 in | 3300 × 4200 | 13.9 MP | 1650 × 2100 |
| A3, 297 × 420 mm | 3508 × 4961 | 17.4 MP | 1754 × 2480 |
| 16 × 20 in | 4800 × 6000 | 28.8 MP | 2400 × 3000 |
A 12 MP phone photo (4032 × 3024) prints at about 13.4 × 10 in at 300 DPI, so it covers every size up to 8 × 10 with room to crop. A web-sized 1600 px image, by contrast, prints sharp only up to about 5 × 4 in.
How do you size images for the web instead of setting DPI?
- Find the width the image is displayed at in CSS pixels (the browser's developer tools show it when you hover the image).
- Multiply by 2 for high-density screens: an 800 px column needs a 1600 px image.
- Resize to that width. In the compressor, turn on Limit width and enter it; in Photoshop, use Image > Image Size with Resample checked and the unit set to pixels; on a Mac, Preview's Tools > Adjust Size does the same.
- Compress at quality 75–85, or set a target size in KB.
- Ignore the DPI field. Whatever it says, the web copy will look the same.