Silk Icon set from famfamfam.com as CSS Data URIs

Tue Mar 15 23:50:24 2011 EST (-0500 GMT)

I’m a big fan of famfamfam.com ‘s free icon set Silk. The Silk icon set contains over thousand simple icons that are free to use for any purpose. All those at famfamfam.com ask is that you include a link back to there web page in your credits famfamfam.com/lab/icons/silk/.

The icons are so simple as small that it makes a lot of sense to include them in your web site’s CSS file as Data URIs. Here’s my web page containing the Silk icon set as CSS/Data URIs.

Wikipedia has a good explanation of what Data URIs at en.wikipedia.org/wiki/Data_URI_scheme . The Data URI scheme is a URI scheme that provides a way to include data in-line in web pages as if they were external resources, as opposed to linking to a file.

The other advantage of using CSS is that the images here are loaded as background images through CSS. An advantage for accessibility and other functional reasons when loading an image for decoration only.

Data URIs are the binary file data represented in Base64 encoding. It’s worth noting that Base64-encoded data is about 4/3s of the original data size, or about a third larger than equivalent binary images. Data URIs also my not be as aggressively cached.

With that noted, there are advantages to using Data URIs. Data URIs reduce the number of HTTP requests. Negotiating a new HTTP request is often the biggest bottleneck on a broadband connection. With small files (like these) the overhead of establishing a HTTP request can actually represent more transferred data than the image itself. These types of decisions reduce the number of round-trips and delay.

Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. Google gives more tips for increasing web page speeds through these types of consolidations at code.google.com/speed/page-speed/docs/rtt.html

Web servers can also include the Data URI image in the content they deflate/gzip before they send it to the browser.

For your connivence, here is the Silk icon set as data URIs. (Warning: 2.1Mb file!) Copy and paste as needed.

Comments are closed.