Using base64 dataURI in lieu of path

[csdude55]

I have a 40kb image that I load as a background image in my stylesheet. In order to save a HTTP connection I was planning to embed the dataURI, like so:

.image {
 background-image: url('data:image/png;base64,blahblahblah...');
 background-size: 100%;
}

This ends up being slightly larger in size (54kb), but I still shave a few microseconds off of the first load so I guess it's still better? What do you guys think?

Assuming that it's better, when I converted to dataURI (using ezgif.com/image-to-datauri) it suggested an < IE7 backup:

.image {
 background-image: url('data:image/png;base64,blahblahblah...');
 *background-image: url('https://path/to/myimage.png');
 background-size: 100%;
}

This kinda throws me off a little... if the browser recognizes the dataURI, wouldn't this make it still do the HTTP connection for the image? That would defeat the whole purpose, right?

[Dimitri]

What do you guys think?

I think this is a good idea ... because this is what I do :) . Of-course, you have to find the right balance, if you do this for all images / backgrounds, it might not be efficient. But for some images, this is good idea I think.

You can also try to convert your image into webp , it will be smaller than png (most of times).

base64 data are larger than raw binary, but, since the css will be compressed (deflate, gz, br) this is a good compromise.

< IE7

Check your stats to see how many of your visitors are still using IE7, it might not be needed to bother... (it's been a while that I stopped trying to deal with older IE versions, this is too much of a pain).

[csdude55]

Thanks for the input, @Dimitri :-) I'll do some comparative before-and-after speed tests tonight when traffic is low on the server, but so far it looks like I'll save about 0.2s... not huge in the grand scheme of things, but I've done a lot of micro-optimizing in the last several months and have shaved off a total of 1.5 seconds (now 1.7s)! So every little bit helps, I think..

Check your stats to see how many of your visitors are still using IE7, it might not be needed to bother... (it's been a while that I stopped trying to deal with older IE versions, this is too much of a pain).

It's really very low at this point, but I figured that if it's only 69 bytes of code then why not? But if it forces another HTTP connection for everyone...

[csdude55]

I've struggled to confirm this... when I have a background image in the stylesheet, does the browser download the image when it downloads the stylesheet? Or does it only download it when the selector is used in the HTML?

Meaning, if I have a stylesheet on the homepage and include a selector with a background image, but that selector isn't actually used on the homepage, will the HTTP connection still be made anyway?

[lucy24]

when I have a background image in the stylesheet, does the browser download the image when it downloads the stylesheet? Or does it only download it when the selector is used in the HTML?

The latter.

:: detour to test site to ensure I am not just talking through my hat ::

On my test site I have one page that first calls the generic stylesheet, which includes a background image, and then appends some page-specific styles which supersede the background image. If I go directly to this page, the image is not loaded.

A related point that may be useful to file & remember: If you've got an element containing an image, and then an @media rule that says display: none for some viewport sizes, the image for this non-displaying element will still be loaded. But if you make it a background image, and say something like "background-image: none" in the @media rule, the image will not be loaded. (I know this because I worked it out a few years ago for a page that includes a large image that I didn't want to burden smartphones with.)