I Solve the Mystery and Explain the Difference Between Pixels, dpi, and ppi
I Solve the Mystery and Explain the Difference Between Pixels, dpi, and ppi
Subscribe to YouTube
What is the Difference Between ppi and dpi
What in the world is the difference between ppi, dpi, and pixels. Pixels per inch (ppi) and dots per inch (dpi). The main area of confusion drums from the lack of understanding, when digital photography started to evolve. Most information, and even programs used dpi incorrectly. I am pretty sure that Adobe Photoshop used to use dpi inside image size not ppi. Below, I will cover what is a pixel, what is ppi, and what is dpi. Pixels, ppi and dpi can be a little confusing so follow along slowly, and feel free to ask any questions below.
What is a PIXEL!
A pixel is a single square, and a group of pixels makes up an element, such as a graphic or photograph. Each pixel has a sub-pixel that emits red, green and blue that give the pixel its color and brightness. We are going to leave the sub-pixel out of the equation, because I am trying to simplify the process. The physical size of a pixel can vary depending the size of a monitor or screen. Note: if you are in Photoshop Image Size and want to view in pixels, you need to change your width and height to pixels not inches. Below you will also see Resolution in ppi. Resolution or ppi is completely different from pixels. A pixel is a dimension like inches or centimeters and ppi is resolution. Think of resolution as image quality.
Pixels vs. ppi
The above image is a nice illustration of the difference between pixels and ppi. Both images were sized in Adobe Photoshop. The image on the left is 500 pixels with a resolution of 1, and the image on the right is 50 pixels with a resolution of 5000. Remember that resolution or ppi is how many pixels per inch. So why does an image with only 1 pixel per inch look so much better than an image with 5000 pixels per inch. The simple answer is resolution has no effect on an image sized for the web. All that matters are how many pixels. Setting resolution on an image sized for pixels has no effect on the image, all that matters are the width and height in pixels. If someone tells you to they need an image for the web and it should be 4X6 at 200 ppi you can be sure they have no idea what they are talking about.
If you are sizing an image for print ppi matters. A print is formulated by Width X Height X Resolution. An example would be 5 X 7 at 300 ppi for a 5X7 print. What you set ppi too, really depends on what type of device is printing the image. The standard go to resolution or ppi for print is 300 ppi. If watching a video might be helpful, I posted a YouTube video below. The video is called, “Sizing for the Web” but it covers the exact same information in the above image of the women.
To the right you will see an image sized at 500 pixels on the left, and 50 pixels on the right. The image on the right as long as it is viewed at 100 percent would look acceptable. The image on the right, you can see down to the pixel level. This image was resized so you can see the difference in quality. However, if I uploaded the two images side by side, they would not look like that if they were both displayed at 100 percent. Below, I will upload the images so you can see the difference at 100 percent and how they would look on a webpage.
Nothing has changed in this image, except I left the 50 pixel image in proportion to a 250 pixel image on the far left. When the images are displayed in pixels on a web page they are seen at 100 percent of the screen resolution. However, to complicate things different monitors have different resolutions. A 250 pixel imace will appear larger on a 16 X 9 inch monitor at 1920X1080 pixels vs. a 16 X 9 inch monitor that is 3480 X2160 pixels. Just imagine the pixels are half the size on the high resolution monitor.
ppi or Pixels Per Inch
Pixels Per Inch (ppi) means how many pixels are contained in 1 inch. As stated above it you are sizing an image for the web ppi is not in the equation. However, if you are sizing the image for print, the ppi will affect the image quality or resolution. It is important to know that you can have too many pixels per inch. You need to contact a printing manufacturer or a printer to find out the optimum ppi. My pro lab for traditional prints uses 260 ppi, my Epson printer uses 300 ppi, and Modern Postcard uses 355 ppi.
dpi or Dots Per Inch
Dots Per Inch (dpi) means, how many dots per inch and refers to how may dots per inch when printed. Depending on the printer those dots can be smaller or larger, but there is an optimum dpi for every printer. dpi is used on a Cyan, Magenta, Yellow and Black (CMYK) print. Not all modern printers use dpi because they completely remap the color before printing.
My Workflow to Web and Print
If you are interested in my workflow, and how I manage an image. I will post my steps for both a web image on the bottom left, and a printed image on the right.
WEB
- Open and edit or tone my image in 16 bits with Adobe Camera Raw and Photoshop
- Save my edited image as a .psd or Photoshop File. (I do not crop or size at this point)
- Size my images in pixels
- Sharpen my image, and amount depends on image size
- Convert to sRGB
- Save As or Save As a Copy in .jpg format
- I use jpeg mini to save for the web
- I use Photoshop actions I created for this process:
- Open and edit or tone my image in 16 bits with Adobe Camera Raw and Photoshop
- Save my edited image as a .psd or Photoshop File. (I do not crop or size at this point)
- Size my image using Height X Width X Resolution (ppi)
- Convert to 8 bits if needed
- Convert to specified color profile
- Save As or Save As a Copy as a .tif file. (.jpg in some instances)
- I use .tif because it does not compress the image, and retains all digital information
