How to point to a specific icon in an icon set?

Question

This isn't the first time I've seen this kind of image:

It seems that each icon is pointed to programmatically by using CSS (???). Is it called an icon set? While browsing a website I'm able to see those icons individually, but when I try to save them, they appear as a base64 encoded file and all the single images are together in the same png file. I mean, how does it work? Is there a way to split them? How are they used in a website?

Thank you!

Answer 1

It's known as an "CSS Image Sprite".

Links with more info:

• http://css-tricks.com/css-sprites/
• http://www.w3schools.com/css/css_image_sprites.asp

It's a very common method in web development. Largely, because it helps limit HTTP requests. The image is downloaded to the users cache, just once, and then shifted around to only display the parts that are needed. This is much more efficient than downloading multiple images.

Answer 2

Those images are called sprites

http://www.w3schools.com/css/css_image_sprites.asp

This website is excelent to generate sprites

http://csssprites.com/

Answer 3

Those are sprites and work this way: you upload the image to your server and then apply them to an element with this code, for example..

HTML

<div id="icon"></div>

CSS

.icon{
  width: 20px;
  height: 20px;
  background: url(yourimage.png) 0 0;
}

.icon:hover{
  background: url(yourimage.png) 20 0;
}

where the first number after the background url is the horizontal indent and the second one is the vertical indent.

You can learn more at: http://www.w3schools.com/css/css_image_sprites.asp