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.
What is "aaaaigz0...my4xmda="?
Validate Base64 using Notepad++
Base64 encryption is a lie
Comments (30)
I hope you enjoy this discussion. In any case, I ask you to join it.
I always learn from this articles too. GBU!