72 dpi for Web, 200 dpi for print?

For those who have dealt with web/graphic designer or printer before, you would probably get this request from them. “Give me the images in 72 dpi for web design,” or “Give me the images in 200 or 300 dpi for printing?” Is this mysterious DPI value an important factor for the quality of image used in Web publishing or printing?

I am not going to explain in details what is DPI (Dots Per Inch). I am also not going to explain where the value 72 comes from. I know how confusing it is when talking about DPI. My objective here is to make your life simpler.

Generally, consumer digital camera set the digital image to 72 dpi and professional digital camera set the digital image to 300 dpi.

The good news is that you do not need to care about this DPI

All you need to care about is the pixel dimensions of the image!

In the example shown below, the pixel dimensions, or generally called image size, are 225 x 300 pixels.

To screen or web page, it does not matter if your image is set at 72 dpi, or 7 dpi or even 7200 dpi. It simply does not matter because on the screen, that number is ignored.

To illustrate, two images are displayed on this web page. They have exactly the same pixel dimensions but different DPI values.

225 x 300 pixels
72 dpi
225 x 300 pixels
300 dpi

As you can see, there is no difference in quality. Even the file size is exactly the same at 18 KB.

 

So when does the DPI value have any meaning? You will only see the difference when the images are imported to Word, PowerPoint or other page layout software e.g. PageMaker

To illustrate, I import two of the above images into Word. They appear different in size.

The image with 72 dpi has a bigger size of 3.13 x 4.17 inch (225/72 x 300/72) on paper. The image with 300 dpi has a smaller size of 0.75 x 1.00 inch (225/300 x 300/300) on paper.

 

 

OK, now talk about printing. Again, you do not really need to care about what DPI value your image is.

All you need to care about is the pixel dimensions of the image!

To print an image to a certain size without quality loss, you need to have “sufficient pixels” to make up that print!

Take the above example to illustrate again. I keep the left image and replace the right image with one that has bigger pixel dimensions.

To compare side by side with the left image, I reduce the display size by dragging the corner (shown in red circle). That is, I packed more pixels within the same box size as the left image.

I also add in an image that has the same bigger pixel dimensions but the DPI value is 200.

 

On the screen, they look about the same. In fact, the left image is slightly sharper. But, how about the printout? Will they still be the same?

Download this Word document file, print it out and see for yourself!

You can see that the two right images have better printout quality! This is because they have more pixels within the same print areas.

You can also see that there is no difference in print quality between the top right image (72 dpi) and bottom right image (200 dpi).
So, I repeat again. You do not need to care about what DPI value your image is.

All you need to care about is the pixel dimensions of the image!

 

Here comes the most frequently asked question:

 

Facebooktwittergoogle_pluslinkedin