Using an image file vs data URI in the CSS

Question

I'm trying to decide the best way to include an image that is required for a script I've written.

I discovered this site and it made me think about trying this method to include the image as a data URI (defined by RFC 2397) since it was so small - it's a 1x1 pixel 50% opacity png file (used for a background) - it ends up at 2,792 bytes as an image versus 3,746 bytes as text in the CSS.

So would this be considered good practice, or would it just clutter up the CSS unnecessarily?

Answer 1

There is a good reason for using a Data URI, rather than the image.

The Data URI is base 64 encoded, which means that it's about 25% bigger than the image. However your CSS file can be cached, so the small size increase probably isn't a big problem.

If you have a lot of images there's an overhead for looking up each one, both in terms of name resolution and getting the image as another resource.

All this means that if images are small, and the overall CSS file is still small, and the CSS is shared between pages that are hit often then you stand to gain performance if you switch to data URIs.

The downside is that they only work in FX, Chrome, etc. The partially work in IE8, but only for small images. They don't work in IE7 or below at all.

Answer 2

I don't think you will gain much... and if it is a file image, the browser can cache it. I wouldn't bother doing it with CSS unless you have a real need for it.