Speedier Sites use CSS Sprites

An Image Sprite is simply multiple images combined into one image. Using the background-position in CSS you can display a specific image from the image sprite.

Sprites reduce the number of files that are requested and downloaded by site visitors, resulting in noticeable decreases in Page-Loading times, Bandwidth usage, and Server loads.

Sprite

1x1 Transparent Gif

To make everything standards compliants I use a 1x1pixel transparent gif as the src for an img tag, then by specifying a class for the img I can make the background-image and size of the img anything.

Now you can use <img src="/transparent.gif" class="spriteImage001" alt="" /> and it will display an image. Without using a transparent gif (src="" or src="#") you get weird results in multiple browsers.

Finding background-position Values

I use Adobe Photoshop to create a master background-layer with a solid bright color, then I change the opacity to 90%.


I find the height and width of an image within the sprite then I measure the distance from the top of the sprite to the top of the image with the sprite.

XHTML Example Markup

PICS class

<img class="PICS pic1" src="http://static.askapache.com/i/gif.gif" alt="" />

UL tag usage

<ul class="ICOS ico1">
<li>CSS.</li>
<li>Apache.</li>
</ul>

A tag usage

<a href="#" class="ICOS ico1"></a>

CSS Example

 .PICS {display:block; background-color:#FFF; background-image:url(http://static.askapache.com/i/sprite-pictures.jpg); background-repeat:no-repeat; overflow:hidden;}
.pic1 {width:147px; height:144px; line-height:144px; background-position:0 0;}
.pic2 {width:172px; height:123px; line-height:123px; background-position:0 -145px;}
.pic3 {width:169px; height:152px; line-height:152px; background-position:0 -270px;}
.pic4 {width:160px; height:145px; line-height:145px; background-position:0 -423px;}
 
.LOGOS {display:block; background-color:#FFF; background-image:url(http://static.askapache.com/i/sprite.png); background-repeat:no-repeat; overflow:hidden;}
.logo1 {width:81px; height:72px; line-height:72px; background-position:0 -70px;}
.logo2 {width:194px; height:64px; line-height:64px; background-position:0 -185px;}
.logo3 {width:150px; height:67px; line-height:67px; background-position:0 -250px;}
.logo4 {width:174px; height:52px; line-height:52px; background-position:0 -424px;}
.logo5 {width:98px; height:41px; line-height:41px; background-position:0 -509px;}
 
.ICOS {background-color:transparent; background-image:url(http://static.askapache.com/i/sprite-icons.png) !important; background-repeat:no-repeat; padding:1px 0 2px 27px;}
ul.ICOS {background-image:none !important;}
ul.ICOS li {background-color:transparent; background-image:url(http://static.askapache.com/i/sprite-icons.png) !important; background-repeat:no-repeat; padding:0 0 0 27px;}
.ico1 li {background-position:0 0;}
.ico2 li {background-position:0 -70px;}
.ico3 li {background-position:0 -140px;}
.ico4 li {background-position:0 -210px;}
.ico5 li {background-position:0 -280px;}
.ico6 li {background-position:0 -350px;}
.ico7 li {background-position:0 -420px;}
.ico8 li {background-position:0 -490px;}
.ico9 li {background-position:0 -560px;}
.ico10 li {background-position:0 -630px;}
 
a.ico1,a.ico1:link,a.ico1:visited,a.ico1:active,a.ico1:hover {background-position:0 0;}
a.ico2,a.ico2:link,a.ico2:visited,a.ico2:active,a.ico2:hover {background-position:0 -70px;}
a.ico3,a.ico3:link,a.ico3:visited,a.ico3:active,a.ico3:hover {background-position:0 -140px;}
a.ico4,a.ico4:link,a.ico4:visited,a.ico4:active,a.ico4:hover {background-position:0 -210px;}
a.ico5,a.ico5:link,a.ico5:visited,a.ico5:active,a.ico5:hover {background-position:0 -280px;}
a.ico6,a.ico6:link,a.ico6:visited,a.ico6:active,a.ico6:hover {background-position:0 -350px;}
a.ico7,a.ico7:link,a.ico7:visited,a.ico7:active,a.ico7:hover {background-position:0 -420px;}
a.ico8,a.ico8:link,a.ico8:visited,a.ico8:active,a.ico8:hover {background-position:0 -490px;}
a.ico9,a.ico9:link,a.ico9:visited,a.ico9:active,a.ico9:hover {background-position:0 -560px;}
a.ico10,a.ico10:link,a.ico10:visited,a.ico10:active,a.ico10:hover {background-position:0 -630px;}
a.ico11,a.ico11:link,a.ico11:visited,a.ico11:active,a.ico11:hover {background-position:0 -700px;}
a.ico12,a.ico12:link,a.ico12:visited,a.ico12:active,a.ico12:hover {background-position:0 -770px;}
a.ico13,a.ico13:link,a.ico13:visited,a.ico13:active,a.ico13:hover {background-position:0 -840px;}
a.ico14,a.ico14:link,a.ico14:visited,a.ico14:active,a.ico14:hover {background-position:0 -910px;}
a.ico15,a.ico15:link,a.ico15:visited,a.ico15:active,a.ico15:hover {background-position:0 -980px;}
a.ico16,a.ico16:link,a.ico16:visited,a.ico16:active,a.ico16:hover {background-position:0 -1050px;}
a.ico17,a.ico17:link,a.ico17:visited,a.ico17:active,a.ico17:hover {background-position:0 -1120px;}
a.ico18,a.ico18:link,a.ico18:visited,a.ico18:active,a.ico18:hover {background-position:0 -1190px;}
a.ico19,a.ico19:link,a.ico19:visited,a.ico19:active,a.ico19:hover {background-position:0 -1260px;}
a.ico20,a.ico20:link,a.ico20:visited,a.ico20:active,a.ico20:hover {background-position:0 -1330px;}
a.ico21,a.ico21:link,a.ico21:visited,a.ico21:active,a.ico21:hover {background-position:0 -1400px;}
a.ico22,a.ico22:link,a.ico22:visited,a.ico22:active,a.ico22:hover {background-position:0 -1470px;}
a.ico23,a.ico23:link,a.ico23:visited,a.ico23:active,a.ico23:hover {background-position:0 -1540px;} 

Cross-Browser/Standards Friendly

This technique works in all major browsers, including Firefox, Internet Explorer, Opera, Safari, and Mozilla.

Hack-free CSS

Works in all browsers, no hacks or funny stuff needed!

3 Sprite Images

Important Speed Tips

To truly speed up your site, you will want to implement a server-side caching technique. Or you can read more about caching and web cache.
Apache Caching Guide

May 4th, 2007

« Apache Variable Fun in htaccessWordPress robots.txt SEO »

Comments Welcome