Image Resolution vs Image Dimensions: What's the Difference?

The words resolution and dimensions are used interchangeably in everyday conversation, and the confusion causes real problems when files move between screen and print.

Dimensions are absolute

Pixel dimensions describe how much information the image contains: 3000 by 2000 means three thousand columns and two thousand rows, nine million distinct colour samples in total. This number does not change unless you resize the file, and it is the only thing that matters for display on a screen.

Resolution is a print instruction

DPI or PPI is a tag stored in the file saying how densely those pixels should be laid out on paper. It changes physical print size and nothing else. The same 3000 by 2000 file is 10 inches wide at 300 DPI and 20 inches wide at 150 DPI, with an identical byte count either way.

Because of this, the frequent request for a 300 DPI image for a website is meaningless. Browsers ignore the field completely. What the requester actually needs is enough pixels.

Working out what you need

For print, multiply the physical size you want by the DPI. An 8 by 10 inch print at 300 DPI needs 2400 by 3000 pixels. For screens, take the CSS display width and multiply by the device pixel ratio you are targeting, usually 2.

The one rule to remember

Changing the DPI tag never adds detail. If a file lacks the pixels for the print size you want, the only real solutions are to print smaller or to go back to the original capture. Everything else is interpolation dressed up as resolution.