resolution - Is it mandatory to keep images at 72DPI for web design?

I have been designing web banners for more than a year but never considered the DPI.

I was using the default 72DPI, but now I want to know is it necessary to create web designs in 72DPI? What if we use more than that, for example 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 72DPI. I just want to know if it is mandatory and does it affect negatively in any aspect?

Answer

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 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. 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.