#Images on the web
Let's talk about 72dpi. The choice of 72 PPI by Macintosh for their displays arose from the convenient fact that the official 72 points-per-inch mirrored the 72 pixels-per-inch that actually appeared on their display screens (1).
But this decision had a negative impact on the rendering of fonts at the poplar 10-point size carried over from typewriters. Microsoft tried to address with the creation of the 96PPI resolution characteristic that is 1/3 times higher then the resolution of the screen. In the end, this addressed the 10-point font issue with Apple, but the result was that 10-point fonts appeared as 13-points.
In time, better technologies, fonts and vector graphics help to address these issues, but in the end we were still left with great confusion as to what the base resolution of a computer is.
Is it 72dpi or 96dpi?
What we know, 1:96 is a fixed ratio of CSS ‘in’ to CSS ‘px’. So for drawing graphics on a screen, 1" = 96px. But this is only a measurement, not a resolution.
Where resolution is applied, is wth the screen of your device. With print, resolution is dependent on the output. With images on the screen, the resolution of the device is your output. Your computer is either using a standard resolution or a hi-dpi (retina) screen. Now, to add more confusion, a 15.4" Macbook pro with retina display and a 2880 x 1800 native resolution will have a resolution of 220PPI. WAT?! But what about 72dpi or 96dpi? This is where we simply understand that there is no longer a 1:1 between the points-per-inch of the OS and the pixels-per-inch in the display. This is referred to as resolution independence (4).
To help with this new world of resolution independence, a new measurement spec dppx (2) is a CSS unit representing the number of dots per px unit. So a 96PPI view is == 1dppx, a 192PPI view is == 2dppx. Take note, this is not a physical resolution spec, this is a CSS resolution spec. A standard def device sees CSS as 96dpi and a retina sees CSS at 192dpi. As confusing as this is, at least there is something that is constant as hardware manufactures are continuing to mess with our heads.
When it comes to the dpi of an image asset when presented to the screen, dpi is meaningless.
#Proof that dpi is meaningless
The following images are completely different. The one on the left is 800x1100 at 10dpi with no jpg compression. The image on the right is also 800x1100 at 72dpi with 100% jpg compression and a 93% reduction in file size.
Difference in image quality, on my Macbook Pro with high retina screen, is minimal at standard viewing distance. Yes, there is some color fragging on the lightsaber and other places, but you have to look close to see that.
#If you do need to send an image asset, follow these steps:
- Export the asset at twice the pixel width and height you intend to display
- Don't worry about dpi, it doesn't matter
- Use heavy compression when exporting a .jpg
- In the HTML attribute or CSS, reduce the size of the image to the desired viewable size.
#Exceptions
First off, if the asset you are adding to the page can be reproduced using CSS, do that first. Next, if the asset is iconic look to use ico-fonts or SVGs as these are not pixel dependent assets and will look great on any resolution device.