Creat image sprites

•  Image sprites help you accomplish this by combining a group of images into a single image. Sprites are a great way to group sets of icons or other similar graphics that are used in your template.
• If you are creating an interface for a bank, you may have icons for search, savings, checking, loans, advice, and more. Instead of saving these files individually, you can group them into a sprite to speed up the download
• For our example, we'll be using icons that are 80 x 80 pixels
• 1.  First take the four images that you've collected and make sure that they are of the same size. Then create a new image that is 2x as tall and 2x as wide as each image (for 80 x 80 icons the new image would be 160 x 160). Place each icon in a quadrant of the new image so they fill the space. Save this image as a PNG inside the /images/folder within the /retina/folder with the filename mySprite@2x.png. Then resize the image to 50 percent and save it as mySprite.pngin the same folder
• 2.  Now we'll test the two versions of the sprites on a web page. Create an HTML document called spritesTest.htmlinside the /retina/folder. Next, we'll add some CSS code to the basic HTML structure, using the measurements of a single one of your non-Retina icons (40 x 40 for this example). The background-size attribute should equal the full size of your small, non-Retina, sprite.

<style>
.icon {
background: url(images/mysprite.png);
height: 40px;
width: 40px;
}
.iconRetina {
background: url(images/mysprite@2x.png);
background-size: 80px 80px;
height: 40px;
width: 40px;
}
.icon1 {background-position: 0 0;}
.icon2 {background-position: -40px 0;}
.icon3 {background-position: 0 -40px;}
.icon4 {background-position: -40px -40px;}
</style>

• 3.  This CSS code will let us set either regular or Retina icons depending on the class that we use. Now we'll add in the HTML code to display both the sprites so that we can compare them.

<ul>
<li class="icon icon1"></li>
<li class="iconRetina icon2"></li>
<li class="icon icon3"></li>
<li class="iconRetina icon4"></li>
</ul>

• 4.  If you are working on a Retina device 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 will notice that icons 2 and 4 are much sharper than icons 1 and 3