Gzip is the best friend of the data URI

Encoding data to Base64 increases its size by about 33% and this is the main reason why many developers are afraid to use data URI scheme. Well, this is fair, because the size really matters, but there are some important points that are often not mentioned. It’s a pity, because they can prove that sometimes it’s better to use data URIs (of course, if size is the only thing that bothers you).

To make it easier to understand how it works, we are going to analyze two HTML pages on which we display a 1x1 image. First, let’s see what happens when the browser loads the page #1 with the embedded image in the usual way:

1. Browser sends a HTTP request (182 bytes) to the page URL.
2. Server returns some HTTP headers (852 bytes) and the HTML markup (385 bytes).
3. Browser detects that it needs to load an image and sends a new HTTP request (176 bytes) to the image URL.
4. Server returns some HTTP headers (995 bytes) and the image contents (91 bytes).

Now let’s see the page page #2 that embeds the same image through a data URI:

1. Browser sends a HTTP request (182 bytes) to the page URL.
2. Server returns some HTTP headers (852 bytes) and the HTML markup (504 bytes).

As you can see, in the second case, the size of the HTML markup is +30.91% larger (+119 bytes), but the image is already loaded. Therefore, in the first case, you need to sum the size of the image and HTML markup. Now, the difference in size is only +5.88% (more exactly, +28 bytes). Not bad, but that’s not all: in the first case the browser sends two HTTP requests, which means it will be slower due to network delays. Moreover, the size of both requests and all headers will be approximately two times larger than page #2, so the total size of which will be -42.63% less.

If you’re glad data URI is the winner of this experiment, it is too early to rejoice, because data URI won only due to the fact that the size of the headers exceeds the size of the image. That is, the ratio will decrease for larger images and as a result the size of the second page will be larger. For clarity, refer to the following table:

Data URI lost the battle, but not the war, because it has a powerful ally, which is good at compressing data. Therefore, with its help we can get good ratios even for large images. I suggest looking at the same pages above for which I enabled the gzip compression:

Wow! The data URI page is always smaller and requires only one HTTP request. Definitely, it takes the cake! Especially if you take into account that as the number of images increases, everything becomes even better.

So now we know that gzip is a must-have thing if we plan to use Base64 encoded data URIs (in fact, you should always enable gzip when server outputs textual data). If you want to know if your server is configured correctly, check out the gzip online test.

However, given the victories proven on this page, this does not mean that you should always use data URI. On the contrary, you need to use it carefully and you must be sure why you need data URI, because it has several disadvantages.