Silk Icon Set CSS: Using CSS Clipping and Optimized Silk Icon Image
First off, I have to start by saying I absolutely love FamFamFam.com’s free “Silk” icon set. It is unequivocally the most valuable set of free images I have ever used and I recommend if you use it you donate accordingly.
With 1000 icons, each roughly 1KB in size, it is understandable how eventually it would get cumbersome for a web application interface using 20 to 30 of these icons at a time to continue to try to handle each of these images individually. Moreover, as often as these icons are used across the web, it made sense to me that the popular image-clipping CSS method might be valuable not just for my own web application development but others as well.
What is the CSS Clipping Method and Why
While I’m not the best at explaining this, I will try my best. Basically, every unique image on your site opens a new HTTP request with your server. If you have 30 mini 1KB icons, each one of them represents a new request to your server. Chances are, your user’s browsers will load these sequentially, only opening a few threads at a time. In many cases, especially with a large number of small images, it makes sense to load them all in a single image. Then, using the CSS Clipping property, you can display only the single small image out of the larger image, just like you would Clip an image in Photoshop. Once your user has downloaded the single image, every time any one of the constituent images is needed, it will be pulled from their computer’s cache – a much quicker methodology. This also makes for fantastic mouseovers…
What is Silk CSS
Really simply, I took the 1MB full Silk image and fit it into a single 67KB PNG. All 1000 icons are stored in this single image. Then, I created a single CSS file that is 58KB before being GZIPd (so it is actually much smaller to download) that makes it very easy to display Silk icons from this file.
<link rel="stylesheet" media="screen" type="text/css" href="http://www.thegooglecache.com/silk.php" />
<div class='silk'><img class='applicationhome' src='http://www.thegooglecache.com/silk.png' /></div>
What is Going On Above
This is an example of displaying the application_home.png icon from the Silk icon set. There are a couple of things to notice…
- We have to surround the image with a Div tag. This is because the Clipping CSS property requires that the clipped item be absolutely positioned. So, of course, we put the absolutely positioned image inside the relatively positioned div. I have added the display:inline-block property to this Div so that it is treated like any other 16×16 image. This has been a little buggy in IE8, though – would appreciate some advice on this from anyone via the comments.
- The img tag accepts the src as the location of the large image. This file will be downloaded once by your users and be in their cache going forward. It also accepts a class. The class name will be whatever the name of the Silk icon is minus the .png and any underscores. For example, to display the application_osx_terminal.png image, you would just use, applicationosxterminal as the class name
That is it. Using that simple code you can display any of the 1000 icons and never cost your users more than 100 KB in downloads.
Hope some of you find this useful!