What is the recommended DPI for images used on websites?

Quick Response:

Whatever:)

calm down, there's an explanation!

DPI means "Dots per Inch", or "dots per inch". In the digital file, this information is a mere number stored in the metadata.

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

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

However, for the same reason, this measure 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 viewed on the screen, as this information is ignored. After all, on the screen the intention is to use all the pixels available, since usually the eye can discern each of them individually.

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

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

practical example:

Imagine an image 300x300 px @ 300 dpi. If it has 300 dots per inch, and the width of this image is 300 pixels (which is equivalent to the point, in digital images), this image when printed (without editing it, or scaling it in the output program) would have an inch wide and a height.

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

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

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

solution:

If you want to make a website or app that makes good use of both a mobile phone with 800x480 pixels and a notebook of these new ones with screen of 3200x1800 pixels, 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 several images of different sizes, and use them according to the size of the screen.

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

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 that of the initial media-query and the element will display the imagem_media.png, and more than that, in the case of screens up to 480px width, the image will be the imagem_pequena.png.

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

Remember to set a @media print if you use multiple media queries and want to control how the printed version looks separately.

and still no definitive solution:

for the new high resolution displays, there is still an ongoing discussion as 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 with applications that use "dpi magnification" in Windows.

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

More details can be seen in this article ^(en) .

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" ^(en)

Update2 (2017): finally there was adoption of srcset:
how to change image on smaller screens (here in SOpt)

_{1. gambiarra}