An image is a grid of pixels, and its dimensions (say 3000 by 2000) are the only thing that determines how much detail it holds. DPI is a separate note in the file that tells printing software how large to make that grid on paper. Screens ignore it.
Keep those two ideas apart, and most confusion about image size goes away.
The test that settles the “72 DPI for web” myth
You may have been told that web images must be 72 DPI. We saved the same 800 by 544 photo three times with Pillow, changing only the DPI tag, and hashed the decoded pixels of each file:
| DPI tag | File size | Dimensions | Pixel hash |
|---|---|---|---|
| 72 | 73,877 bytes | 800 x 544 | c1753321e4 |
| 96 | 73,877 bytes | 800 x 544 | c1753321e4 |
| 300 | 73,877 bytes | 800 x 544 | c1753321e4 |
Same size, same pixels. A browser will draw all three identically, because the tag only affects how the file is printed or placed in a page layout program. So you can stop worrying about DPI for web images. The 72 figure is a leftover from early Macintosh screens, which had about 72 pixels per inch.
Strictly, DPI (dots per inch) describes printers, and PPI (pixels per inch) describes images and screens. People use DPI for both, and so do many apps, so we will follow suit where it causes no confusion.
Print: where DPI does matter
For print, the relationship is plain arithmetic:
Print size in inches = pixels ÷ DPI
So a photo 5919 pixels wide prints at about 19.7 inches wide at 300 DPI, or 39.5 inches at 150 DPI. Changing the DPI value does not add or remove any detail. It only spreads the same pixels over more or less paper.
To go the other way, multiply. For a 6 by 4 inch print at 300 DPI, you want 1800 by 1200 pixels.
| Print job | Common DPI | Pixels for an 8 x 10 inch print |
|---|---|---|
| Magazine or high-quality photo print | 300 | 2400 x 3000 |
| Office printer, everyday documents | 150 to 200 | 1200 x 1500 to 1600 x 2000 |
| Poster seen from a few feet away | 100 to 150 | 800 x 1000 to 1200 x 1500 |
| Banner or billboard seen from far off | Well below 100 | Ask the printer |
The rule of thumb behind this table: the farther away people stand, the less resolution they can see. That is why a billboard can get away with far fewer pixels per inch than a business card. These numbers are conventions, so if your printer gives a specification, follow it.
Changing DPI versus resampling
Image editors usually offer two operations, and mixing them up causes problems.
- Change the DPI without resampling. The pixels stay the same, only the print size changes. No quality is lost. In Photoshop, this means unticking “Resample”. In Mac Preview, it means unticking “Resample image”.
- Resample. The software creates a new pixel grid. Going down discards detail. Going up invents pixels by interpolation, which softens the image and does not recover detail.
So if a print shop asks for “300 DPI” and you have 3000 pixels of width, that is a 10-inch print, and you can set the tag without changing a pixel. If you need 20 inches at 300 DPI, you need 6000 real pixels, and enlarging in software will not fully make up for them. A shop that rejects a file for being “72 DPI” often only wants the tag changed, provided the pixel count is high enough.
The tag can also be missing, as files saved from a browser canvas generally carry no print resolution. Our Resize Image tool changes pixel dimensions, and has no DPI setting. If a print job needs a particular tag, set it in an image editor afterwards.
Screens: CSS pixels and device pixels
On screens, there is a further wrinkle. CSS “pixels” are not hardware pixels. The CSS specification defines 1px as 1/96 of an inch in a nominal sense, and the browser maps those units to however many physical pixels the device uses. The ratio is exposed as window.devicePixelRatio.
So a phone that reports a width of 390 CSS pixels with a ratio of 3 is really 1170 hardware pixels wide. An image placed at 390 CSS pixels only looks fully sharp if it has about 1170 real pixels. Fewer than that, and the browser scales it up, so it looks slightly soft next to crisp text.
This is what “retina” means in practice: more hardware pixels per CSS pixel. It is why design tools export “@2x” and “@3x” assets.
The practical effect is that the pixels an image needs are its displayed CSS width times the device pixel ratio. However, 3x photos rarely look better than 2x, and they cost a great deal more data. A common compromise is to cap photos at around 2x, and give logos and icons a vector format so they are sharp at any ratio. See SVG vs PNG.
Responsive images: letting the browser choose
Do not send one huge image to every device. Offer several sizes, and describe how wide the image will be. The browser then does the maths with the viewport and pixel ratio it knows about:
<img src="p-800.jpg"
srcset="p-400.jpg 400w, p-800.jpg 800w, p-1200.jpg 1200w, p-1600.jpg 1600w"
sizes="(min-width: 900px) 700px, 100vw"
width="1600" height="1088"
alt="Describe the photo">srcset lists the files and their real widths, and sizes says how wide the image will be displayed: 700 CSS pixels on wide screens, full viewport width otherwise. We loaded this markup in Chromium under four device settings to see what it picked:
| Viewport | Pixel ratio | Slot in real pixels | File chosen |
|---|---|---|---|
| 1280 CSS px | 1 | 700 | p-800.jpg |
| 1280 CSS px | 2 | 1400 | p-1600.jpg |
| 390 CSS px | 1 | 390 | p-400.jpg |
| 390 CSS px | 3 | 1170 | p-1200.jpg |
The same HTML sends a 1x phone the 400-pixel file instead of the 1600-pixel one. With the JPEG sizes from our file size test, that is 19 KB instead of 214 KB. The width and height attributes are not the display size. They give the browser the aspect ratio, so it can reserve space before the image loads and the page does not jump.
Get the sizes value roughly right, because browsers assume 100vw if you leave it out, and may fetch a much larger file than necessary. Use <picture> instead when you want to change the crop or the format, not just the resolution.
How many pixels do you need?
Use this as a quick guide for common jobs:
| Destination | Pixels |
|---|---|
| Full-width website hero | 1600 to 2000 wide, more only for very large displays |
| Image in an article column | Column width x 2, often 1200 to 1600 |
| Thumbnail | Displayed size x 2 |
| Link preview for social sharing | 1200 x 630 |
| Full HD slide or video frame | 1920 x 1080 |
| 6 x 4 inch photo print | 1800 x 1200 |
The 1200 by 630 social preview size is a de facto standard rather than a rule, and platforms may crop differently. Check your own post with a preview tool before a big launch.
Common mistakes
Displaying a huge image at a small size. A 4000-pixel photo in a 400-pixel slot looks fine, and the visitor still downloads all of it. Resize before publishing. The savings dwarf anything a quality setting can do.
Stretching in CSS without keeping the ratio. Set only one of the two dimensions with height: auto, or use object-fit, so people’s faces do not get squashed. Cropping with Crop Image gets you an exact shape instead of a stretched one.
Upscaling to meet a requirement. Doubling the pixels of a small logo does not give you a better logo. Go back to the source file, ask the designer, or recreate it as a vector.
Judging sharpness on the wrong screen. An image that looks sharp on a 1x office monitor can look soft on a 2x laptop. Check on a high-density display, or at least on a phone, before you sign off.