Image Resolution 101

What’s it going to be: dpi (dots per inch) or ppi (pixels per inch)? DPI and PPI are technically very different. However, people tend to use them interchangeably. So what’s up with that…?

Digital Reference: The “pixels” on a camera sensor are light absorbing photosites, while a screen has light emitting picture elements. In terms of resolution these two complimentary technologies are both referred to by their PPI or the number of Pixels Per Inch. Subsequently, the resolution of the digital images they produce (sensor) or display (screen) are also referred to in terms of their PPI.

Printing Reference: When printing a digital image the “Pixels” roughly translate to “Dots” or DPI. That is, the resulting Dots of ink Per Inch on a surface. So, technically there is no such thing as a digital image with a resolution of 300dpi. However, a 300ppi image will print at 300dpi. Or, you could say that a given photo was printed at 300dpi.

Sensors: Camera sensors, are referred to by their total pixel count such as 8MP (8 Mega Pixel or in this case, 8 million pixels) and their dimensions: 3264 pixels wide x 2448 pixels tall.

The resulting digital image (jpeg) may have a pixel density of around 240 – 300 PPI (Pixels Per Inch) depending on your camera and camera settings. A typical 3:2 ratio image would then have pixel dimensions of about 3264 x 2448 px. The required space to save this image could be anywhere from about 1.5 to 4.7 MB (Mega Bytes)…but that’s another story.

Print: If you are speaking or even thinking about printed photographs then use Dots Per Inch.

A printed photograph is made up of millions of tiny dots of ink on a surface. A photograph printed at 72 dpi would be “draft” quality–if your printer will even print it. For quality prints 300 dpi is recommended

Screen: If you are speaking or thinking about images to display on a screen–any screen, then use Pixels Per Inch. Or better yet, refer to the images dimensions, i.e. 1400 pixels by 1050 pixels and simply ignore the PPI.

A screen displays an image in Pixels (picture elements). Every screen has a set number of pixels (resolution) at which it displays an image: 72 ppi (still common on some older screens) up to 300 ppi and more on newer HD displays and/or smartphones etc..

For screen display the image dimensions are more important than it’s PPI. The image dimensions (e.g. 1400 x 1050 px) will determine how it is displayed. For screen display the ppi is irrelevant. What affect does this have on viewing an image? Here is an example…

A Simplified Example of Screen Resolution Affect:

This is not a scientifically accurate comparison. It is just intended to give a reasonably accurate impression of what happens with an image displayed on different screen resolutions.

Example One:

screen-image_ega

Regardless of the image resolution (ppi), this photo would fill an old EGA monitor screen displaying the image at 72 ppi because the image and the screen have the same dimensions–640 x 480 pixels.

Example Two:


The image here is identical to the one above, but because the screen width has 3 times more pixels, the image appears much smaller relative to the screen size. The image is still 640 x 480 pixels even though, in this case, it is displayed at 134 ppi.

Here’s a thought. What if you change the image resolution to 134 ppi. Would that make the photo display larger or with a better quality on the larger screen? (Answer below…)

In the early days of web design it was thought that if you match the image ppi with the screen ppi (Apple 72ppi – Windows 96 ppi) you would maximize the quality of the viewed image. This became referred to as “The 72ppi Myth” and you can read lots about it on the web.

Answer to “Here’s a thought”: No. Whatever you change the image resolution to…say 300 ppi even, it is still a 640 x 480 px image and this is how it will display.

Author’s Note:

I hope you find this information useful.

When I began building websites in 1996, the advice was to keep a web page (yes, a whole page) to a maximum of 25KB…can you imagine? But that was in the days of dial-up modems when data was transferred at a rate of 56 kbit/s (that’s 56,000 bits (bit = 1 or 0) per second. (8 bits – 1 byte).

Now, I ask you: If the recommended limit for a whole page is just 25KB how many photo images can you display–with reasonable quality–that are 200KB each. Obviously none.

Displaying photos on a web page has always been a challenge–thank goodness for high-speed internet where now a data transfer rate of around 15Mbps (15,000,000 bits per second) is considered slow (as opposed to newer 150Mbps fiber optic connections).

However, when it comes to displaying photographs on the web, the size of image files still matters. Please read and follow the Submission Instructions for submitting photos.

If you have read all the way to here…thank you! Please feel free to respond: