Practical guide · dimensions explained
PPI, DPI and CSS pixels are different measurements
Separate image density, printer dots and browser layout units before calculating a size.
Reviewed September 28, 2026 · Worked examples calculated for this guide
Illustration of the related tool’s example; proportions only.
PPI describes pixels over a physical length
For an image placed at a particular size, PPI means image pixels per inch of the print. For a display, PPI describes the native pixel grid over the viewable panel. These calculations share a unit, but refer to different objects. An image with 3000 pixels along a side is 300 PPI when that side is printed at 10 inches.
DPI describes printer dots
Printer DPI measures the printer’s dots per inch. Do not enter a printer’s advertised dot resolution as your image PPI merely because both are described as resolution. A printer can use multiple dots to reproduce an image pixel. Its dot specification alone does not supply a suitable image pixel count or establish the quality of your particular print.
CSS pixels belong to layout
CSS defines 96 CSS pixels per CSS inch. A browser’s CSS pixel is not necessarily one native panel pixel, and a CSS inch on a screen is not a reliable physical ruler. Zoom and operating-system scaling further complicate the relationship. For physical display density, use the native panel resolution and the measured or specified viewable diagonal.
A screen example
For a 1920 × 1080 panel with a 24-inch diagonal, the pixel diagonal is √(1920² + 1080²), approximately 2202.91 pixels. Dividing by 24 gives about 91.79 PPI. This assumes a rectangular display with square pixels. It does not infer the browser zoom, the operating-system scaling setting or how sharp the screen will look at a given viewing distance.
Reference notes
References checked September 28, 2026. Calculations and worked examples are our own.