FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home » CSS » Speedier Sites use CSS Sprites

Speedier Sites use CSS Sprites

by Charles Torvalds

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

CSS Image Sprite Example

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="Speedier Sites use CSS Sprites" title="%name %category" /> 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

CSS Sprite
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://s.askapache.net/i/gif.gif" alt="Speedier Sites use CSS Sprites"  title="%name %category" />

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://s.askapache.net/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://s.askapache.net/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://s.askapache.net/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://s.askapache.net/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

CSS Image Sprite ExampleCSS Image Sprite ExampleCSS Image Sprite Example

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

Tags

Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman


It's very simple - you read the protocol and write the code. -Bill Joy

>

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | htaccess file | htaccess.guru

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain