In Safari 6 (included in iOS 6) Apple added a new method of adding Retina images to websites. The new image-set specification is an alternative to using media queries that makes formatting easier and allows for potential future benefits. This recipe is only for experimental use, as it will only work in new versions of Chrome and Safari.
The immediate benefit of using image-set is that the two images are listed next to each other in your CSS code, making it easier to read and update. The potential future benefit is that, according to the specification, the browser is able to make the decision about which image should be displayed. Once it is fully implemented in browsers, the browser may choose the lower resolution image in cases where there is a slow connection, or the user could specify which images they prefer.
The image-set specification works with image sprites and background images. This recipe will cover how to use the image-set property to provide the browser with image resolution options for background images.
To get started we'll be using the Retina and standard resolution background images we created in the Retina background images recipe. You'll need a large Retina background pattern and one half its size.
First, we'll create an HTML document called
imagesetTest.htmlinside the/retina/folder to test our images. Inside of the basic HTML structure, add the CSS code to create a box and backgrounds to apply to it.<style> .box { height: 200px; width: 700px; } .background { background: url(images/myBackground.jpg); background: -webkit-image-set(url(images/myBackground.jpg) 1x, url(images/[email protected]) 2x); } .backgroundNormal { background: url(images/myBackground.jpg); } </style>Then create some
divtags in HTML with your two backgrounds to test them out.<div class="box backgroundNormal" /> <div class="box background" />
If you are working on a Retina device (running Safari 6+, Chrome 21+, or another browser with
image-setsupport) you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You'll notice that the second background is much sharper than the first.
To test out the CSS image-set, we first used a div tag with a set height and width to hold our background image. Then we applied a normal background property with a single image. This was created as a fallback for browsers that do not support the image-set property.
Then we added a second background property with -webkit-image-set() wrapping our two images. We used the -webkit browser prefix because image-set has not been finalized yet. This way we avoid any potential issue that could arise if there are changes to the final specification when it is released.
Within the image-set tag, we add the normal URL structure for both our background images separated by a comma. After each URL we include a value to specify the density of each image, the first being 1x and the Retina image being 2x.
Notice that when using this specification you don't need to include the background-size property that was necessary for other Retina background images.
It's very important to keep in mind that the CSS image-set specification has not been finalized yet, and this code will not work on every high-definition device. I felt that it was important to include it here because, once the final version is agreed upon, this could be the preferred method of implementing Retina images in the future. It is recommended only for testing or if you feel that a high percentage of your users have upgraded their browsers and it is fine to allow others to see the standard resolution images.
The image-set specification leaves the choice of which image to display to the browser, which means that a variety of factors including connection speed could be used in the future to make this decision. Currently, connection speed isn't taken into account for any of these Retina solutions, but there are some projects that are experimenting with this approach. If you'd like to experiment with these projects you can check out Nathan Ford's pngy (http://github.com/nathanford/pngy) or Yahoo's boomerang (http://yahoo.github.com/boomerang/doc).