I came across some neat free Icons a couple of day’s ago. I found 178 free icons by WooThemes.

They suited my needs for some navigation icons I was after, so after a quick download, I have them all. Great.

Now, when I code, I’m all about speed of page loads with our reducing quality of course. So more and more and with that I have been using CSS sprites for images, the Less requests, the faster a page loads. there are hundreds of articles explaining this sort of thing, like only use 1 CSS file, putting your Javascript at the bottom, I use them, I even have written a Mootools extensions for embedding Google Analytic in to my sites, that secretly embed the GA code after the page has loaded so its doesn’t slow down the rest of your site from loading, tracking external links and form submits, but any how that is for another post.

178 PNG icons

After extracting the ZIP, I found 178 separate icon files, and I wanted a gray-scale version of each for a hover state, that would mean up to 356 requests plus all of the rest of the images on that page.
Now of course I’m not going to use every Icon, but you never know !

Using PHP & the GD Library to make my Sprite

I must Credit Sandy for his awesomeness and contribution to this script.

< ?php
		function spriter($dir = '*.png', $dest = 'sprite.png', $spacing = 0) {

			// define icons sizes
			$icon_width = 32;
			$icon_height = 32;

			// start height of my sprite canvas
			$height = 0;

			// select all the icons and read theri height to build our canvas size.
			foreach (glob($dir) as $file) {
				list($w, $h) = getimagesize($file);
				// make sure out icon is a 32px sq icon
				if ($h == $icon_height)
					$height += ($h + $spacing);
			}

			// double our canvas height to allow for a gray-scale versions.
			$height = ($height * 2);

			// create our canvas
			$img = imagecreatetruecolor($icon_width, $height);
			$background = imagecolorallocatealpha($img, 255, 255, 255, 127);
			imagefill($img, 0, 0, $background);
			imagealphablending($img, false);
			imagesavealpha($img, true);

			// start placing our icons from the top down.
			$pos = 0;
			foreach (glob($dir) as $file) {
				$tmp = imagecreatefrompng($file);
				if (imagesy($tmp) == $icon_height) {
					imagecopy($img, $tmp, 0, $pos, 0, 0, $icon_width, $icon_height);
					$pos += ($icon_height + $spacing);
				}
				imagedestroy($tmp);
			}

			// place all of our icons on again, but this time convert them to gray-scale
			foreach (glob($dir) as $file) {
				$tmp = imagecreatefrompng($file);
				if (imagesy($tmp) == $icon_height) {
					imagefilter($tmp, IMG_FILTER_GRAYSCALE);
					imagecopy($img, $tmp, 0, $pos, 0, 0, $icon_width, $icon_height);
					$pos +=  ($icon_height + $spacing);
				}
				imagedestroy($tmp);
			}

			// create our final output image.
			imagepng($img, $dest);
		}

Sample Usage

< ?php
// IMPORTANT:  REMEMBER TO MAKE SURE THE WEBSERVER HAS WRITE ACCESS TO YOUR DESTINATION DIRECTORY.

spriter('icons/*.png', 'icons/sprite.png', 10);

Show our Sprite