Is embedding background image data into CSS as Bas

Question

I was looking at the source of a greasemonkey userscript and noticed the following in their css:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

I can appreciate that a greasemonkey script would want to bundle anything it can within the source as opposed to host it on a server, that's obvious enough. But since I had not seen this technique previously, I considered its use and it seems appealing for a number of reasons:

1. It will reduce the amount of HTTP requests on page load, thus enhancing performance
2. If no CDN, then it will reduce the amount of traffic generated through cookies being sent alongside of images
3. CSS files can be cached
4. CSS files can be GZIPPED

Considering that IE6 (for instance) has problems with cache for background images, this seems like it's not the worst idea...

So, is this a good or bad practice, why WOULDN'T you use it and what tools would you use to base64 encode the images?

update - results of testing

• testing with image: http://fragged.org/dev/map-shot.jpg - 133.6Kb

• test URL: http://fragged.org/dev/base64.html

• dedicated CSS file: http://fragged.org/dev/base64.css - 178.1Kb

• GZIP encoding server side

• resulting size sent to client (YSLOW components test): 59.3Kb

• Saving of data sent to client browser of: 74.3Kb

Nice, but it will be slightly less useful for smaller images, I guess.

UPDATE: Bryan McQuade, a software engineer at Google, working on PageSpeed, expressed at ChromeDevSummit 2013 that data:uris in CSS is considered a render-blocking anti-pattern for delivering critical/minimal CSS during his talk #perfmatters: Instant mobile web apps. See http://developer.chrome.com/devsummit/sessions and keep that in mind - actual slide

Answer 1

Bringing a bit for users of Sublime Text 2, there is a plugin that gives the base64 code we load the images in the ST.

Called Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

PS: Never save this file generated by the plugin because it would overwrite the file and would destroy.

Answer 2

I tried to create an online concept of CSS/HTML analyzer tool:

http://www.motobit.com/util/base64/css-images-to-base64.asp

It can:

• Download and parse HTML/CSS files, extract href/src/url elements
• Detect compression (gzip) and size data on the URL
• Compare original data size, base64 data size and gzipped base64 data size
• Convert the URL (image, font, css, ...) to a base64 data URI scheme.
• Count number of requests which can be spared by Data URIs

Comments/suggestions are welcome.

Antonin

Answer 3

As far as I have researched,

Use : 1. When you are using an svg sprite. 2. When your images are of a lesser size (max 200mb).

Don't Use : 1. When you are bigger images. 2. Icons as svg's. As they are already good and gzipped after compression.

Answer 4

Base64 adds about 10% to the image size after GZipped but that outweighs the benefits when it comes to mobile. Since there is a overall trend with responsive web design, it is highly recommended.

W3C also recommends this approach for mobile and if you use asset pipeline in rails, this is a default feature when compressing your css

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

Answer 5

Thanks for the information here. I am finding this embedding useful and particularly for mobile especially with the embedded images' css file being cached.

To help make life easier, as my file editor(s) do not natively handle this, I made a couple of simple scripts for laptop/desktop editing work, share here in case they are any use to any one else. I have stuck with php as it is handling these things directly and very well.

Under Windows 8.1 say---

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... there as an Administrator you can establish a shortcut to a batch file in your path. That batch file will call a php (cli) script.

You can then right click an image in file explorer, and SendTo the batchfile.

Ok Admiinstartor request, and wait for the black command shell windows to close.

Then just simply paste the result from clipboard in your into your text editor...

<img src="|">

or

 `background-image : url("|")` 

Following should be adaptable for other OS.

Batch file...

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

And with php.exe in your path, that calls a php (cli) script...

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

Answer 6

If you reference that image just once, I don’t see a problem to embed it into your CSS file. But once you use more than one image or need to reference it multiple times in your CSS, you might consider using a single image map instead you can then crop your single images from (see CSS Sprites).