CSS Sprites
Posted The: 11/07/2008 At: 8:32
Last Edited: 29/07/2008 At: 18:08
CSS Sprites is one of many advantages of using CSS. And is indeed very useful when optimizing your website. Consider the case where one would have border-images applied as background-images on division tags, like done on Brugbart by the use of BlueBoden's BorderTechnique
Common Border Techniques
I didn't like the other Techniques, which are more like hacks, so i made my own some time ago. No matter the Technique however, if using images as borders, Each image would mean an Additional HTTP Request. By using CSS Sprites, we are efficiently able to lower the requests, and perhaps even halve the file-size in some cases.
The way this is done, is by merging the images togetter into a single image, and then use the css background position property to place each Sprite.
The result?
I minimized the http requests required to load the page, and almost halved the size of the combined images, not to mention the improved quality i got from using png24 above png8 with 256 colors and index transparency.
How to make CSS Sprites
Simply carefully consider the size in pixel of each image, and do something similar to what i did in the image to the left. When you got your image ready, you will need to place the image using the CSS background-position Property. 
Note. The border-set displayed in the two images BG_Spirits2.png and BG_SpiritsRTB2.png attached to this article may be used for free in your own layouts and projects. Keep in mind however, that you got it for free, and so you should give it for free.
If you have difficulties applying the borders in your own layout, i recommend you read BlueBoden's BorderTechnique With background-Images.
Comments: [0]
