how to make a Sprite

ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.

How can i save an image that it should 开发者_运维问答be so small but when used on my web site it comes out normal size?

---

Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.

Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.

In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.

Either way, hopefully that helps gives you a better idea of the concept of sprites.

---

From the very site you link:

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: