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.
Code Example
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="http://www.thegooglecache.com/silk.php" />
</head>
<body>
<div class='silk'><img class='applicationhome' src='http://www.thegooglecache.com/silk.png' /></div>
</body>
</html>
Here is a simple working example
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!
No tags for this post.5 Comments
Trackbacks/Pingbacks
- Web Design - Whats old is new again…sort of - Chicken Doughnut - [...] Using CSS Clipping and Optimized Silk Icon Image [...]
Submit a Comment
I am impressed by the 67kb file size for so many icons.
Google uses this technique too. http://www.google.com/images/nav_logo4.png
You are unfortunately losing the semi-transparency in the icons. You would need to do the same, but use the icons in the download, rather than the 1MB preview image. It would work out the same anyway.
Any way you can email me the source of http://www.thegooglecache.com/silk.php?
I would prefer to house this on my internal server and not rely on your server being up 100% of the time. I also dont want to have to recreate all the class names in a database of my own if you have a huge array or DB that the silk.php is iterating.
I also found a bug on the pixel placement using the latest version of FF and wanted to use this PHP database of all the class names to test each one to make sure the pixels and image sizes are right on each one since i found that bug.
.tagblueedit{clip:rect(14048px 16px 14064px 0px);top:-14048px}
is your CSS
but it needs to be something like:
.tagblueedit{clip:rect(14051px 16px 14067px 0px);top:-14048px}
Are there more bugs that I need to unit test against if I want to use this?
Seems like it would be cool to have a link that shows each class name vs the icon that will be displayed. Cause that is what i would create to know what class name to use.
heyyyy.
your demo is not work 🙁
Hey just wanted to give you a brief heads up and let you know a few of
the images aren’t loading correctly. I’m not sure why
but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same results.