The following are CSS background-image examples

The following images are included in the view by using background-image in CSS. Two different sizes and resolutions. All assets are have the size attribute value of width: 400px and height:40px. When you are seeing an asset with 800px x 80px, this is the 2x assets.

The real proof is when you zoom in on the banner images. If you are on a retina device you will see a clear difference between the 800x80px banners and the 400x40px banners.

The following uses the HTML img src tag to add the images

HTML alone gives us few options for managing hidpi assets. The following illustrates using the img tag with no additional size attributes.

The following examples use the height and width attribute on the 2x asset only to reduce the physical size.

The following example illustrates the example using the img tag and CSS to reduce the physical size.

Technique using -webkit-image-set

The proposed -webkit-image-set will deliver the preferred asset based on device pixel density. Feature works in Safari, Chrome and Opera.

Technique using media queries

Deliver the preferred asset based on device pixel density

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.

The 1:96 CSS fixed ratio

The following blocks are created using CSS. The Green block is 96x96px. The orange square is 1x1".

96px square

1in square