What Is Image Resolution: Pixels, PPI and DPI Explained

Confusion around resolution is widespread and understandable. The same term is used to describe different things depending on context: the camera talks about megapixels, Photoshop talks about PPI, the print shop asks for 300 DPI, and Google recommends that web images have "enough resolution for Retina displays." It seems like every piece of software and every professional uses the vocabulary a little differently.

This article puts each concept in its proper place, explaining how they relate and what actually matters in each practical situation.

What is a pixel

Pixel is short for picture element. It's the smallest unit of a rasterized digital image: a single, indivisible dot of color.

A digital image is a rectangular grid of pixels. Each pixel stores a color value, usually represented across three channels: red (R), green (G), and blue (B), each with 256 possible levels (0 to 255). That results in 256³ = 16.7 million possible colors per pixel in the 8-bit RGB model.

A pixel is an abstract unit — it has no inherent physical size. A pixel isn't big or small: it's just a color value in a grid. The size it takes up in the physical world depends entirely on the display or print context.

That distinction is at the heart of all the confusion around resolution: pixels exist in an abstract space, with no physical dimensions. When we talk about resolution, we're always talking about how those abstract pixels get mapped onto physical space — whether on a screen or on paper.

What is image resolution

"Resolution" is a term with two distinct meanings that are often confused:

• Resolution as total pixel dimensions: "this image has a resolution of 3840×2160 pixels." Here, resolution simply describes the number of pixels in width and height. A "high-resolution" image in this sense has a lot of pixels — more detail, more capacity to be enlarged or printed big.
• Resolution as density: "this image is 300 DPI." Here, resolution describes how many pixels (or dots) fit into a unit of physical length. It's the relationship between digital space (pixels) and physical space (inches, centimeters).

The first sense — total pixel dimensions — is what determines a digital image's quality and "size." The second — density — only matters when the image needs to be mapped to a physical size, like in printing.

What is PPI — Pixels Per Inch

PPI stands for pixels per inch. It's the measure of pixel density on a screen or in a digital image. It describes how many pixels exist per linear inch of length.

A 24-inch Full HD monitor has a resolution of 1920×1080 pixels. The screen is about 21.5 inches wide physically. So: 1920 ÷ 21.5 ≈ 89 PPI. Every inch of the screen contains 89 pixels.

An iPhone 15 Pro has a 6.1-inch screen with a resolution of 2556×1179 pixels. Physical width: 2.82 inches. So: 2556 ÷ 2.82 ≈ 460 PPI — more than 5 times the density of a conventional monitor.

A screen's PPI determines its sharpness: the higher the PPI, the smaller the individual pixels, the harder they are to distinguish with the naked eye, and the sharper the image looks. Apple named its "Retina display" that because, at normal viewing distance, the human eye can't distinguish individual pixels above 300 PPI.

What is DPI — Dots Per Inch

DPI stands for dots per inch. Originally, the term refers to the density of ink dots a printer lays down on paper. A printer at 600 DPI places 600 ink dots in every linear inch of paper.

In common graphic design use, DPI and PPI are used interchangeably to describe the pixel density of an image intended for print. When a print shop asks for a "file at 300 DPI," they're asking for the image to have 300 pixels for every inch of the final print size.

The relationship between pixels, PPI/DPI, and physical size

This is the central equation that explains everything:

Physical size (inches) = Total pixels ÷ Density (DPI or PPI)

Examples with the same 3000-pixel-wide image:

Notice that the image itself doesn't change — the 3000 pixels are the same in every case. What changes is how those pixels are spread across physical space. At 300 DPI, each pixel takes up 1/300 of an inch. At 72 DPI, that same pixel takes up 1/72 of an inch — more than 4 times bigger. That's why an image printed at 72 DPI looks "pixelated": each pixel is big enough to be seen individually.

What are megapixels

A megapixel means 1 million pixels. A 12-megapixel camera produces images with roughly 12 million pixels. The typical resolution for 12 MP is 4032×3024 pixels — and 4032 × 3024 = 12,192,768 pixels, which rounds to the advertised "12 megapixels."

The practical takeaway: any modern smartphone (12 MP or more) has more than enough resolution for printing at A4 size at 300 DPI. The phone camera isn't the limiting factor for conventional formats.

Why "72 DPI" became associated with "for the web"

This is one of the oldest and most misunderstood conventions in digital design. Its origin is historical: in the 1980s, the first Macintosh monitors had roughly 72 pixels per inch. Apple's system used 72 PPI as a reference because it made the correspondence between screen and print easier: 1 typographic point = 1/72 of an inch. Photoshop adopted 72 PPI as the default for screen documents, and the convention stuck.

Contemporary monitors have densities of 90 to 140 PPI. Modern iPhones reach up to 460 PPI. The value 72 PPI is completely outdated as a way to describe screens.

The most important implication: the DPI value in a digital image's metadata has no effect at all on how it displays on screen. A 1200×800px image with "72 DPI" metadata and another with "300 DPI" display identically in the browser — because the browser ignores that metadata and shows one file pixel as one screen pixel. DPI metadata only matters when the image is opened in software that's going to print it.

Retina displays and the @2x factor

Apple launched Retina displays on the iPhone 4 (2010) with 326 PPI — roughly double the PPI of monitors at the time. The solution adopted was logical pixel vs. physical pixel:

• Logical pixel (CSS pixel): the unit used in code. An image declared with width: 300px in CSS takes up 300 logical pixels.
• Physical pixel: the actual dot on the screen. On a Retina @2x display, each logical pixel is rendered by 4 physical pixels (2×2). On an @3x display, each logical pixel corresponds to 9 physical pixels.

The result is that raster images look blurry on high-density screens if they aren't provided at high enough resolution. The solution is to provide images at double (or triple) the display dimensions:

• Image displayed at 300px wide → provide 600px (@2x) or 900px (@3x)
• For a gallery with 800×600px images → provide 1600×1200px files

Use ImageTools' Resize Image tool to precisely adjust dimensions before uploading.

Resolution for printing: calculating the pixels you need

Starting from the equation Pixels = Physical size × DPI:

For banners and large-format materials viewed from a distance, 150 DPI is usually enough. For desktop printing (card, photo, flyer), the standard is 300 DPI.

Resolution for screens: what actually matters

For images intended for screens and the web, forget DPI. The practical rules are:

1. Size for the display space × screen factor. For a 1440px-wide banner on @2x screens, provide 2880px. For a product image displayed at 600px, provide 1200px.
2. Don't upload images larger than necessary. A 4032×3024px photo displayed at 800×600px on the site is wasteful — the browser downloads 12× more pixels than it uses.
3. DPI metadata affects nothing on the web. Exporting "at 72 DPI" or "at 300 DPI" for the web is irrelevant — the pixel count is what matters.

Why increasing an image's DPI doesn't improve quality

This is perhaps the most frustrating and common confusion. There are two ways to change DPI in Photoshop (in Image → Image Size):

• Without resampling: the pixel count doesn't change. Photoshop just recalculates the physical print size. A 720×540px image at 72 DPI becomes a 720×540px image at 300 DPI — the same pixels, in a smaller physical space. Quality hasn't improved.
• With resampling: Photoshop creates new pixels through interpolation — calculating intermediate values between existing pixels. The result has more pixels, but they're "invented." The image looks smoothed or blurry, never sharper. Detail that didn't exist in the original photo can't be created by math.

Conclusion: the only way to get more real pixels is to start from an originally higher-resolution image. Changing the DPI in Photoshop doesn't create detail — it just redistributes the existing pixels across different physical spaces.

Video resolution: how it relates to image resolution

Frequently Asked Questions