Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have been designing web banners in photoshop for more than 1 year but never considered the DPI, as I was using the default 72 dpi, but now I want to know is it necessary to create web designs in 72dpi and what if we use more than that for ex 200dpi. i know that more dpi means more quality image and thats why I want to use high DPI, but recently I read somewhere that for web banners we should use 72 dpi. I just want to know if it is mandatory and does it affect negatively in any aspect.

thanks

share|improve this question
add comment

5 Answers

up vote 24 down vote accepted

PPI (Pixels Per Inch) settings are not used in web images. Images on the web, retina displays or otherwise, are displayed by their pixel dimensions (width and height) not any PPI/DPI setting. In fact, many web images such as png, gif, jpg may not even store a ppi setting in their internal data and rely on width and height settings.

A 100 pixel x 100 pixel image displays as that regardless of any PPI/DPI setting.

This is why images for retina displays are saved at 2x size, rather than an increased ppi setting. The pixel density of retina displays is higher however, they still display image at whatever the screen states is the width and height of an image not based on any PPI setting.

In reality, a monitor using a pixel density of 72ppi hasn't been seen since the early to mid 1980s. 72ppi hasn't been accurate for nearly 30 years. In fact, it was never accurate for Windows systems since Windows uses a default of 96ppi for pixel density.

Don't believe me? Try it for yourself. Create two images in Photoshop both 100 pixels by 100 pixels. Make one image 72ppi and the other 300ppi. Save them both for web.. are they any different in a web browser? Nope. They are both 100px by 100px images still.

DPI (Dots Per Inch) settings are only applicable when printing an image.

It doesn't make any difference what ppi setting you use for web images. It's the (pixel) width and (pixel) height of an image which are important.

When working with multiple images it's important to remain consistent. You will want all your images to be set at the same ppi to avoid resizing and scaling of aspects should you move pieces between images. Whether you choose to use 72, 96, 200 or 145.8 ppi doesn't matter, but all the images should be set the same.

share|improve this answer
    
Great reply. One minor point, if that's ok: “It doesn't make any difference what ppi setting you use for web images” — Definitely true for the images themselves, but occasionally it can matter for the tools (please see my reply). –  Marc Edwards Jan 4 '13 at 0:50
    
:) I realize a gradient in a 72ppi image will not be the same gradient in a 300ppi image :) But that's more a matter of image creation as opposed to saving for output. –  Scott Jan 4 '13 at 0:53
    
Gradients are fine, it's all about the way Photoshop handles layer styles and how appearance changes as you copy or move elements between documents — it scales them according to document DPI (which is a smart move, but means you have to be very careful). If you're designing for web, the best option is to set everything to 72DPI, always. –  Marc Edwards Jan 4 '13 at 4:33
    
Actually the grads will change as well. But I agree... everything needs to be the same ppi. –  Scott Jan 4 '13 at 8:09
1  
Sorry, but I think it's very important for answers on Stack Exchange to be as correct as possible, due the volume of traffic they can receive. This is especially true for answers that have been marked correct or answer that have a lot of up votes. I've expanded the discussion here: graphicdesign.stackexchange.com/questions/13855/… –  Marc Edwards Jan 5 '13 at 3:00
show 12 more comments

While PPI definitely doesn't matter — it's pixel dimensions that matter for web and app design, you should be very careful about using design applications and mixing PPI settings. Here's why:

However, if you plan to use Photoshop and different pixel densities for each document, dragging layers and copying layer styles between documents scales layer styles — dragging a layer from a 326PPI Retina iPhone document to a 264PPI Retina iPad document will mean all layer styles get scaled by 20% (then rounded to the nearest integer). And that’s probably not what you want. Also, OS X’s Preview will display 72PPI images at the exact size, no matter how you have it set up.

Pixels per inch is just a tag

It is for these reasons I assign 72PPI to all my design documents, and I recommend you do the same. To change the pixel density of your Photoshop document without resizing the image data, open the Image Size dialogue, uncheck Resize Image and type in the desired pixel density.

share|improve this answer
add comment

I will go into details what the "dpi" actually means, by examples; with that, you may just see the answer yourself.:

In short, your image consists of dots of colour, which are next to each other. But the do not have size in any physical sense.

Now, when you show an image on a screen, you will normally just put the dot colors of the image into the raster of colored rectangles that your screen can display. Note that both, what I call "dots" and rectangles here, are called "pixels" - but looking closely they are something different.

If we display an image in this natural way on a screen, we can measure it's size.
For example, our image is 500 dots wide, we put these into colored rectangles on the screen, and see it is 5 inches wide. Then, we have 100 rectangles per inch, showing 100 of our dots per inch.
That is, our image has 100dpi on the screen.
But we did not even look at the dpi value in our image file!

Now, if we look at our file, it may well say the image is 200dpi! The dpi value is about how many color dots are visible per inch of screen width or height. So, the dpi value in the image is telling us that our image will be 2.5 inches wide when displayed - as a promise, not as a fact.

When we assigned the image dots to the screen, we did not even care about that, because we just displayed it, and measured the actual, physical dpi of the screen representation of the image.
So, as you see, the promise was just plain wrong. And nobody cares! Because it's just not relevant.

The file was promising - by saying 200dpi - it will "2.5 inches wide when shown" . Then, we used a screen that was showing it as 5 inches wide - we can know that because we know what the actual screen is.
Normally we do not even know what the end user will use as display, so we can guess only anyway,

So, now it makes sense:

  • We did not know the dpi the images, shown on a screen, will have, because we did not know the screen.
  • But we had an idea how it should look like, "roughly this size... ok, then we need about 200dpi or so." and saved the "200dpi" in the file
  • Later, we looked at the screen and measured that it's, in fact, 100dpi;

And, there is not only one screen the image could be shown on - they could be different in size, so it's not even possible to know a real dpi value when creating an image file.

See also my answer on What is exactly a "Pixel"? .


Directly to the question, based on the above:

When you specify dpi in an image file, that's not directly reated to the quality of the image show in the end.
But it may be used to communicate about image quality - in terms of intents: you can say "I want this image to be shown on a 200dpi screen".

If I want to show this image, I may take care and look to find a 200dpi screen; or maybe I just use an old 75dpi screen that may be on my desk. The image will be pretty large, I have to scroll - but that's my problem, and: you will not even find out what is really used - the 200dpi value did not controll the image quality - it just communicated how to display it "the right way" if I care.

share|improve this answer
add comment

Though I do believe that having a higher dpi will increase the file size of the image which can impact a websites preformance

share|improve this answer
3  
the DPI setting in the file has no bearing on file size. Only on how big it'd be when printed. –  DA01 Jan 2 '13 at 20:17
    
And a higher DPI would result in a lower print size. –  Joe Z. Jan 4 '13 at 16:42
add comment

DPI/PPI does matter in Microsoft Word, by the way. Because a page in a Word document is defined by actual measurements (mm or inches), the DPI/PPI setting will determine the display size of the image.

For instance, you could have two images both 100 x 100 px. Save one as 100 dpi and the other as 200 dpi, the 100 dpi version will display as twice the size of the 200 dpi version.

Exact same image, exact same quality, but the 200 dpi version is half the size because it is displaying twice as many pixels per inch on the page.

share|improve this answer
3  
What does Word have to do with web images? –  Scott Jan 9 at 1:58
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.