A virtual teacher who reveals to you the great secrets of Base64

CSS sprites and data URI are not enemies

CSS sprite is an image containing several images arranged in a special order, so that using the background-position property you can display the desired image by its “coordinates”. CSS sprites are useful because they allow you to load multiple images with just one HTTP request which can significantly improve page loading speed.

As you probably guessed, in terms of optimizing page speed the same task is solved by the data URI scheme — one HTTP request can load multiple images. The problem is that the size of the data URI is about 33% larger. For this reason, you can often meet developers who say that CSS sprites are better than data URIs. Well, I will not argue with this, because most often it is true. However, I must point out that CSS sprites and data URI can get along well with each other. That is, it is sometimes better to encode CSS sprites to Base64 and embed them into CSS via data URI.

Why Base64 encoded CSS sprites may be better?

To display an HTML page with several CSS sprites, the browser must send one HTTP request for loading CSS and one additional request for each CSS sprite. We can get rid of additional HTTP requests if we encode CSS sprites to Base64 and embed them through the data URI. Best of all it works for small sprites and, of course, when gzip compression is enabled. However, don’t forget that data URIs has some disadvantages, so use them carefully.

Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.

Loading...