Which DPI is recommended for images used on websites?

Question

I have always used 72 dpi in my images, but currently this standard has low definition thanks to the variety of devices with different resolutions (notebook, tablet, smartphones and etc). What would be the recommended IPR to be used nowadays?

Answer 1

Quick response:

Whatever :)

Relax, there’s an explanation!

DPI stands for "Dots per Inch", or "Dots per inch". In the digital archive, this information is a mere number stored in metadata.

The content of the image itself is pixels. The more pixel, the more definition. o dpi is a "warning" to the output program, saying "make these pixels fit in this space".

In print media we usually have a much larger amount of dots than is required for the resolution of the human eye, and common market printers currently have output of more than 600 dpi, and usually the material sent to them does not need to be prepared with so much detail.

However, for the same reason, this measurement makes no sense for screens. The screen is measured in pixels, and an image 100x100 pixels @ 72 dpi appears the same size as an image 100x100 pixels @ 9000 dpi, when seen on the screen, because this information is ignored. After all, on the screen the intention is to use all pixels available, as usually the eye can discern each of them individually.

So much so that many image formats usually do not natively store the information of dpi, like Jpeg, for example.

The problem of proper design in various "screen resolutions" (in quotes, because actually resolution is an ambiguous term to explain the amount of points of the device) is in the actual image size in pixels.

Practical example:

Imagine a 300x300 px image @ 300 dpi. If it is 300 points per inch, and the width of that image is 300 pixels (which is equivalent to the point, in digital images), that image when printed (without editing it, or if you scale it in the output program) would be one inch wide and one inch high.

Now, imagine if the screen outputs were to respect the value in dpi: You make an image of these and play on the screen, and it appears as a square of an inch, then play on the screen of the mobile phone and it continues with an inch wide and one of height... Or worse! Imagine you presenting the same image on a projector to an audience. She would have to keep appearing at the measure of 1x1 inch to keep the 300dpi. Probably not the desired result.

In short: when you change the size of a file composed of pixels, the dpi becomes the result of the amount of endpoints x the actual area occupied, and not what is indicated in the file.

This is what happens on the screen (thank God!): the dpi ''true' image is that of the device. From the original image what counts are the pixels.

Solution:

If you want to make a site or app that enjoys both a mobile phone with 800x480 pixels and a notebook of these new with 3200x1800 pixels screen, one way is to use vector images such as SVG, which are scalable without loss of quality, or what is more traditional, which is to save various images of different sizes, and use them according to screen size.

In the case of multiple images, you can resort to the media-query CSS, which allows you to specify attributes according to the available area on the screen, among other things.

Example of media-query:

#cabecalho {background: url(/imagem_grande.png) left center no-repeat}

@media (max-width: 800px) {
   #cabecalho {background: url(/imagem_media.png) left center no-repeat}
}

@media (max-width: 480px) {
   #cabecalho {background: url(/imagem_pequena.png) left center no-repeat}
}

That is, the ID element #cabecalho will display the imagem_grande.png, but if the width of the displayed area is less than 800px, the style will be overwritten by the initial media-query and the element will display the imagem_media.png, and more than that, in the case of wide screens up to 480px, the image will be the imagem_pequena.png.

This example was extremely simplified, remember that with media-queries you can completely change the page layout, not just the size of the images. What goes inside the media-query is conventional CSS, so colors can be changed, alignments and what else you imagine.

Remember to define a @media print if you use several media queries and want to control the aspect of the printed version separately.

And still no definitive solution:

For the new high resolution displays, there is still a discussion underway, because for compatibility reasons, Webkit, for example, treats each pixel as a set of 4 pixels, 2x2, when it comes to "Retina" displays. Similar solution to this is what happens to applications that use "dpi magnification" in Windows.

The proposed by the Webkit.org staff itself is to use SVG to solve the problem of magnification getting "ugly", but where not possible, there is the technical repair ¹, which is to use images with double pixels scaled down, such as CSS background, possibly combined with one of media-query which is the min-device-ratio. The problem is that this is a specific Webkit solution, apparently not very solid. It remains to be seen how effective it is in other browsers.

More details can be seen in this article .

Update: a light at the end of the tunnel, coming from the W3C (hopefully not a train):
"The SRCSET attribute - An HTML extension for adaptive images"

Update2 (2017): finally there was adoption of the srcset:
How to change the image on smaller screens (here at Sopt)

_{1. gambiarra}