Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I have been designing web banners for more than a year but never considered the DPI.
I was using the default 72 dpi, but now I want to know is it necessary to create web designs in 72 dpi? What if we use more than that, for example 200 dpi?
I know that more DPI means more quality image and that's 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 if it affects negatively in any aspect?
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 on the web 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 over 40 years. In fact, it was never accurate for Windows systems, because 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. DPI has no bearing on images destined for screen. DPI refers to the amount of ink dots/spots the press will place within an inch. Since no display on Earth uses ink, DPI is an incorrect term to use for anything related to display screens.
Be aware some mobile manufactures chose to use the term DPIx or xDPI which is sometimes shortened to simply DPI. This is not the traditional form of the acronym and the manufacturer has simply muddied the waters a great deal. If you see DPI in relation to mobile screen resolutions, they are speaking about effective PPI and not really referencing Dots Per Inch. A more appropriate acronym would have been xPPI or PPIx because mobile screens, like all displays, use pixels and not ink.
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.
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.
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.
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:
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 exactly is 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.
I just tested two copies of an image that I made with Photoshop. However I set one at 72 dpi and the other at 720 dpi to see if any of the browsers I use would render them different sizes on the screen.
On all browsers except one, they looked identical - size-wise and quality-wise. However, with the use of Google Chrome, the one made at 72 looked fine, but the one made at 720 was extremely tiny - like it was 1/10 the size.
Good grief. That looks like an argument for putting all free-standing (not constrained within a web page) images at 72. Virtually all of mine (which number in the many hundreds) are at 120 dpi. Even though they still look large enough on Chrome, maybe with that browser in mind I should work at putting them all at 72. Maybe somewhere in the fine print in Chrome's preferences there is a remedy.
