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.
img srctag 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.
-webkit-image-set will deliver the preferred asset based on device pixel density. Feature works in Safari, Chrome and Opera.
Deliver the preferred asset based on device pixel density
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 following blocks are created using CSS. The Green block is 96x96px. The orange square is 1x1".