问题
i have a website which has many icons and each icon has separate image, but i was thinking to add all thous icons into one image and use that for faster load, but im not sure if i should do this.
what is pros/cons for this. any suggestions? or should i just keep it 1 image for 1 icon?
回答1:
That's a common (and good) technique called a CSS Sprite. Here's a good, albeit a bit dated, article explaining them: http://www.alistapart.com/articles/sprites
回答2:
If you were to use CSS Sprites then your Icons will load up much quicker as they are all from the same image. As soon as one icon can be displayed then you know the whole image has loaded. If the image is optimized for web then this will give you pretty good load time.
For example if you had created an image with 10 icons then you can simply use a reposition to display one icon at a time.
This can be done in CSS using techniques such as:
.teststyle {
background-image: url(icons.png);
background-position: top; left;
}
or
.teststyle {
background-image: url(icons.png);
background-position: 10px; 50px;
}
Hope that helps :)
回答3:
Have a look at CSS Sprites:
http://www.alistapart.com/articles/sprites
回答4:
Combine them into one image to reduce server requests.
For a more modern article describing the process: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
来源：https://stackoverflow.com/questions/4870292/css-icon-images-or-icon-image