The above image is one that I actually use on this site. You will see a lot of the images in this sprite by looking around on my page..
Wow! here are more images... but remember they are all from the same image. So instead of your visitors browsers requesting 22 images to display these 22 icons, your browser made a single request, saving you bandwidth and speeding up your site for visitors. , , , , , ,
A method of using a master image made up of smaller images that are used for presentation within a site, and displaying these images as needed by positioning them via the background-position property
The css background-position declaration informs the clients browser where to position a background image. The property accepts three kinds of values: keywords, pixels and percentages, values that may be mixed. When you use only pixels and percentages, the first value denotes the left position, the second one the top position. Get the backgrond-position specs and practice some example positioning.
Sliding Doors Meets CSS SpritesA while back Douglas Bowman wowed Alistapart readers with his excellent article Sliding Doors of CSS, describing a new and revolutionary way to build a tabbed menu interface using CSS.
CSS Sprites: Image Slicing's Kiss of DeathThe natural tendency is to assume that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Plus, one master image requires only a single color table when using a GIF, but each slice would need its own. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes
This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.OptionsThe tool has a number of options you can configure to modify characteristics of the generated sprite image and CSS to better match the specifics of your site set up. These options are detailed below:
CSS Sprite GeneratorFor the uninitiated, a CSS Sprite is a single image file which contains several graphics. Using CSS background positions it's possible to display any one of the graphics. By using a sprite you save on multiple http requests which helps speed up the rendering of your page.The tool allows you to upload a zip of images which the script then concatenates into one image to be used as a CSS Sprite. The CSS offsets for each image are created and output and class-names for each image in the sprite can be generated from the filenames of each of the original images. In fact this approach is recommended.
October 8th, 2007