CSS Sprites generation tool
Here's my last weekend's project - a web-based tool to generate images for CSS sprites: http://www.csssprites.com. Cool domain name, eh? I couldn't believe it was not taken.
CSS Spr...what?
This is a simple technique used for page load performance purposes. Since HTTP requests are the most expensive thing you can do in regards to front-end performance, you strive for making as little requests as possible. So instead of having the browser download 4 rounded corner images for example, you create one image that has all four. Then you use CSS' background-position to only show the part of the image you want. More on the subject in this ALA article
How does the tool work
You upload as many images as you want and the tool generates a mosaic of all images, gives you the result as PNG and gives you the coordinates you need to use in the background-position declaration. The tool also gives you an html page as an example, so you can save both the PNG and the html page for reference.
Image size
If you properly optimize the big image, you might actually have smaller size than all the individual images combined. In my tool, the PNG image generated is not optimized at all, I leave this to you to use PNGOUT or any other tool you know. Also you can convert the PNG into GIF if that's better for your purposes.
Implementation - PHP
The PHP code is fairly simple. The actual spriting (is that a word?) class takes a list of images and calls getimagesize() on each one to get the dimensions. The image with the biggest height is used as distance between images. The rest is just composing the imagemagick command that will to the work. Here's the important method:
function combine() { if ($this->distance === false) { $distance = $this->_biggest; } else { $distance = (int)$this->distance; } if ($this->output_dir === false) { $output_dir = $this->_dir; } else { $output_dir = $this->output_dir; } $half = ceil($distance / 2); $coord = array(); $y = 0; foreach ($this->images as $i=>$data) { $this->images[$i]['x'] = $half; $this->images[$i]['y'] = $half + $y; $coord[] = '-page +0+' . $y . ' ' . $i; $y += $data[1] + $distance; } $cmd = 'convert ' . implode(' ', $coord) . ' -background none -mosaic -bordercolor none -border ' . $half . 'x' . $half . ' ' . $output_dir . '/result.' . $this->output_format; system($cmd, $ret); return $ret === 0; }
Implementation - JS
In the spirit of web2 I couldn't afford a complete page reload 
although it would've been much simpler. I just had to get fancy. YUI to the rescue. On page load I set up the form for async request, using YAHOO.util.Connection. In case of file uploads YUI generates an iframe behind the scenes and uploads to the iframe. Then it takes whatever is in the body on the iframe and gives it to you instead of the XMLHttpRequest's responseText property.
So the files are uploaded to upload.php which calls the class that has the method mentioned above then loops through the $images property of the said class and writes the example html file as well as prints out a JSON string with the same image information.
YUI's Connection calls my callback function and I get the invaluable responseText. Parsing the JSON with the json.js, I get a JS object. Looping through it and DOM-generating a table of results is the semi-last step. The last is (we're fancy, remember?) to yellow-fade the background color of the result, using YAHOO.util.Animation.
BTW, I got fancy once again and combined and minified json.js with my JS file, so that there is one less request and a side effect impossible to read. The unminified version of the JS that does all the work is here for reference.
Comments
I hope this tool cane be useful for quickly generating those sprites, if only for prototyping purposes. Any comments, requests, bug reports are all very welcome.
And how do you like the version of the tool? Anyone n00b can do "beta", it takes a true h@x0r (or something) to do a better job 
Ah, yeah, and the page badly needs a stylesheet, do you want to help?
This entry was posted on Wednesday, June 27th, 2007 and is filed under Ajax, CSS, JavaScript, performance, php. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
June 27th, 2007 at 7:51 am
Stoyan Stefanov’s Blog: CSS Sprites generation tool…
…
June 27th, 2007 at 10:58 am
[...] In his latest post, Stoyan Stefanov introduces a new project he’s working on, the implementation of CSS sprites: This is a simple technique used for page load performance purposes. Since HTTP requests are the most expensive thing you can do in regards to front-end performance, you strive for making as little requests as possible. So instead of having the browser download 4 rounded corner images for example, you create one image that has all four. Then you use CSS’ background-position to only show the part of the image you want. [...]
July 20th, 2007 at 6:40 pm
[...] CSS Sprites generation tool You upload as many images as you want and the tool generates a mosaic of all images, gives you the result as PNG and gives you the coordinates you need to use in the background-position declaration. [...]
November 21st, 2007 at 1:59 pm
Very nice, very useful! Are there plans on releasing the source of the entire project?
November 22nd, 2007 at 7:10 am
Thanks Daniel. I should probably release the whole source code, but I figured the client side js is there already and the only clever part of the server-side is the imagemagick part which I posted. Nevertheless, I should post the whole thing. Maybe after the next update.
December 26th, 2007 at 5:35 am
And again a CSS sprites generation tool: http://printf.ru/spritr/
This one comes with CSS, not that it helps, but anyways.
Not sure about IE (never tested nor willing to do so).
Emits CSS, too. Optimal rectangle packing coming soon
January 4th, 2008 at 4:03 am
@harmful – Nice job! Looks very slick too. I love what you’ve done hiding the actual input fields
May 20th, 2008 at 2:27 am
very usefull and this is a simple technique used for page load performance purposes.
June 17th, 2008 at 3:29 am
css background examples , Properties , Attribute – - http://css-lessons.ucoz.com/background-css-examples.htm
June 23rd, 2008 at 2:16 am
HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
November 8th, 2008 at 11:22 pm
@considered harmful
wow – that’s the best generator I’ve seen so far – you rock!
most optimal sprite size, which matters most to me; and also the prettiest UI…
(am not so keen on not seeing the file names I’ve selected — got confused about where I was in my list of images, and had to start over)
cheers,
Adrian Russell-Falla
November 27th, 2008 at 3:30 am
[...] CSS Sprites generation tool [...]
December 6th, 2008 at 7:04 am
[...] CSS Sprites generation tool [...]
October 1st, 2009 at 3:13 am
[...] L’autore, nel presentare il generatore, offre anche il codice PHP e Javascript utilizzato. È tutto in questo post. [...]
November 30th, 2010 at 2:49 pm
[...] is a fun weekend project I did two and a half years ago. Back then I was even more convinced that this technique is wildly underused, still [...]
February 19th, 2011 at 2:31 am
[...] some more ideas and a different imagemagick command for generating sprites – see the very original post announcing the [...]
November 1st, 2011 at 5:14 pm
[...] is a fun weekend project I did two and a half years ago. Back then I was even more convinced that this technique is wildly underused, still [...]
November 23rd, 2011 at 2:00 am
awesome…
cau u share this project ?? tq
December 31st, 2011 at 7:24 pm
Pretty portion of content. I just stumbled upon your web site and in accession capital to say that I get in fact loved account your weblog posts. Anyway I will be subscribing in your feeds or even I success you get entry to consistently quickly.