Making CSS Sprites, the easy way!
December 4th, 2010
I was recently doing a little research on making CSS sprites easier, and came
across this really cool system for generating CSS Sprites:
It uses Java to read a CSS file , then "compress" all the images you ask it
to into single images. The advantage of this, is that it means the visitors
browser only has to request 1 image, instead of x images.
In the below example, you can see a very simple setup of 6 social media
image:
http://www.mywebsitedesignersblog.com/examples/sprites_example/sprites1.html
This just uses some very simple HTML and CSS:
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Sprite Test Before</title> <link rel="stylesheet" type="text/css" href="./sprites1.css"/> </head> <body> Bebo: <img src="./blank.gif" class="bebo" /> Facebook: <img src="./blank.gif" class="facebook" /> Delicious: <img src="./blank.gif" class="delicious" /> Digg: <img src="./blank.gif" class="digg" /> Twitter: <img src="./blank.gif" class="twitter" /> Buzz: <img src="./blank.gif" class="buzz" /> </body> </html>
The CSS:
.bebo {
background-image: url(./bebo.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
.facebook {
background-image: url(./facebook.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
.delicious {
background-image: url(./delicious.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
.digg {
background-image: url(./digg.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
.twitter {
background-image: url(./twitter.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
.buzz {
background-image: url(./yahoo_buzz.png);
background-repeat: no-repeat;
width: 32px;
height: 32px;
}
As you can see here, all we are doing is simply making a “blank” image, and then passing back in the CSS the “image” we want to use, with the dimensions.
Ok, so pretty standard your saying? Here comes the cool bit 
If you goto http://csssprites.org/ and download the files, then upload onto your server. For me, I simply uploaded them into /www/sprite_gen/ .. but you can put it anywhere you have access to SSH with
Ok – so the next part is adding the “Comments” into a CSS file, so SmartSprites knows what we wanna do with them. At the start, we place this (at the top of the .css file);
/** sprite: mysprite; sprite-image: url('./mysprite.png'); sprite-layout: vertical */
This tells SmartSprites that we want to create the image in the same directory as the CSS file, and name it “mysprite.png”. It also says to make the image “vertical” (i.e one image on top of the other). The horizontal/vertical stuff is very helpful when you want to do repeat-x and repeat-y for backgrounds ,.. but we will deal with this in another article
Now, in the main content itself we want to add int he comments next to each of the lines we want SmartSprites to deal with and make into a new Sprite.
To do this, you simply place this kinda thing alongside the background-image line:
/** sprite-ref: mysprite; */
..so this line:
background-image: url(./bebo.png); /** sprite-ref: mysprite; */
..would end up looking like:
background-image: url(./bebo.png); /** sprite-ref: mysprite; */
What this does, is tells us to add this particular image into the “mysprite” image we added at the very top of the page.
Once this is done, we get onto the fun (and easy!) bit.
You need to login to your server via SSH or Telnet, and “cd” to the correct directory.
For example, if you login and the files are in /home/domain.com/www/sprite_gen/, you would type:
cd /home/domain.com/www/sprite_gen/
Then do a “ls”, just to make sure you are in the right place
Now all you have to do is run this query:
./smartsprites.sh --css-files /home/webdesign/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css
You should see something like this:
user@localhost sprite_gen $ ./smartsprites.sh --css-files /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css INFO: Reading sprite image directives from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css. INFO: Reading sprite reference directives from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css. INFO: Reading image from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/bebo.png. (/home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css, line: 3) INFO: Reading image from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/facebook.png. (/home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css, line: 9) INFO: Reading image from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/delicious.png. (/home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css, line: 16) INFO: Reading image from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/digg.png. (/home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css, line: 22) INFO: Reading image from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/twitter.png. (/home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css, line: 28) INFO: Reading image from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/yahoo_buzz.png. (/home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css, line: 34) INFO: Writing sprite image of size 32 x 192 for sprite 'mysprite' to /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/mysprite.png. INFO: Creating CSS style sheet: /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2-sprite.css. INFO: Reading CSS from /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2.css. INFO: Writing CSS to /home/user/mywebsitedesignersblog.com/www/examples/sprites_example/sprites2-sprite.css. STATUS: SmartSprites processing completed in 451 ms.
Important: If you get a “permission denied” error, make sure the smartsprites.sh file is “CHMOD 666″
If you don’t see anything about “WARN”, then you should be fine – and the new sprite image should exist in the location you asked it to be saved.
Now, in your .html page, simple change:
(assuming your CSS file is called style.css)
<link rel="stylesheet" type="text/css" href="./style.css"/>
..to:
<link rel="stylesheet" type="text/css" href="./style-sprite.css"/>
Then goto your page – and it should all be using the new CSS Sprite!
You can see the end result here
By doing the “joining” of the images, we have managed to reduce the filesize in this example from 26.92kb, down to a meere 13kb. This is only on 6 small images, so imagine what it could do on a full site!
I hope you have enjoyed this tutorial.
Special thanks goes out to the Author of SmartSprites, Stanislaw Osinski. Without his hard work (and willingness to give this out for anyone to use!), making CSS sprites would be “much” harder! (trust me, they are a real job to make the correct images + css manually =))
Categories: CSS • HTML / XHTML coding • SEO
-
Google sketchup
-
ulcendced
-
Wouter
Simple Menu System using jQuery, and sub-slide list elements