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.