CSS offers a lot of flexibility to web developers and can be used and abused in many different ways. The background-image property can be especially useful when dealing with images that should be displayed as overlays (via a DIV). I make use of this over at my jQuery PhotoBoxr plugin, however instead of using images I specify image data directly in my CSS file as a Data URL.

Understanding how this is done is quite straight forward and I'll cover that first.

There are online tools that will convert your image file to a Data URL. I used this one. It produces something that looks like this...


With that in mind, your CSS changes from...


...to this (abbreviated for display purposes):


Basically you take the 'data:' string and put it into the url() function. The end result is your CSS and images are combined into a single file. This means the browser requests a single file from your server so theoretically would be more optimal, but there are catches.



The main catch is file size. By changing your image into a Data URL, the overall size of the image will increase. For small images this is not an issue, but for larger images it does start to become noticeable. Another catch is that certain browsers have a limit on the size of a Data URL (32kb), though you should never do this if your images are anywhere near that size anyway.

More pros and cons are discussed here.

So after reading all the pros and cons, when should you use CSS with inline Data URL images? The answer is a little fuzzy but the following checklist should serve as a guide:

• Your source images are quite small (<5kb)
• It's not feasible to bundle image files with the CSS
• Same image is not used multiple times i.e. one background-image tag per Data URL
• Having a single CSS file is cleaner e.g. when distributing your code and your code has a small amount of CSS and image use
• Caching of CSS and Images together is acceptable

In my case all of the above items were true so I went with the combined CSS+Image file approach. However in my case the overriding reason was the fact that I didn't want users of my plugin to download all the additional image files before starting to use the plugin i.e. it was cleaner that way.

Because my plugin uses just a handful of images and a tiny bit of CSS it make complete sense to merge these together. The same may not apply to other projects. I did see about a 2Kb increase of overall file size, but I think that's well worth the convenience of having just one file.

On the other hand if your CSS reuses the same image multiple times or you have large images, this approach should not be used.

-i