One way of speeding up a website is to minimize the number of http requests by combining several small files of the same type. You can do this with scripts, stylesheets, and–by combining images into sprites–with icons and other pictures. So far so good. But using sprites and @media queries gets tricky when addressing devices with a high density display (such as Retina in iOS).
Important update as of 2016-01: HTTP/2 makes sprites obsolete. You should no longer be using this technique! (This article is only of historical value.) You can use sprites to save http requests, to preload rollovers, or to simplify design work.
A sprite is an image file which you can create by laying out the data of several images next to one another in one single image file, and saving it for web. Then, you can use CSS positioning magic to reveal the individual images contained in that one file, one at a time. This part gets somewhat tricky when addressing devices with high-density displays.
Mobile WebKit work with a virtual resolution in combination with a property which specifies the pixel density of the physical display.
The background-size property you specify for devices with a high-density display should contain the size of the standard-display sprite. For example half the width and half the height of the sprite for high-density displays.
The -background-size property you define should be the size of the total sprite, so not just the size of a single icon within the sprite. For example with a sprite consisting of three elements at 60px by 60px each:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
.selector {
background-image: url(http://your.domain.com/somesprite.png);
-moz-background-size: 180px 60px;
-o-background-size: 180px 60px;
-webkit-background-size: 180px 60px;
background-size: 180px 60px; } }