What is the technique of using an image file with several icons in it? [closed]

Question

Now I'm exploring the source code of many website to learn their techniques, one thing I've found is that they using an image file that usually with transparent background and a lot of icons scattered in this single image. and using background image position attribute to position these icons in different place in the page.

I'm very interested about this technique and want to learn more about it, anyone can give me the resources of how to make these and what's the technique name of this?

Answer 1

Believing you are talking about CSS Sprites, it's a good practice of handling images(especially for navigation) and also the number of HTTP requests.

Theory:

Get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images

You don't use a whole bunch of small images (such as icons and menu buttons) but collate them all into one larger image (which requires only one HTTP request to load it instead of a whole series of them) and then use CSS to select and display only a certain rectangle from that image (using width, height and position offset) as a background image.

There are n number of tutorials and even CSS Sprite Generators(but I dont have any personal experience on using generators) that would help you explore the technique.

FYI: The best practice of working on sprites is either before designing the website(where you will assume the required images) or at the end of the design(by then you will be sure of the required images--more recommended--)

I guess this would be a best place to start with: http://css-tricks.com/css-sprites/

Google them! Explore!!