Why base64Encode images in CSS?

Question

Possible Duplicate:
embedding background image data into css as base64, good or bad practice

I was just browsing the source on my Google Chrome homepage and notices that images are base64 encoded in the CSS. What's the advantage of this? I'm tempted to think that it's just to reduce http requests, but since it's a local application it doesn't matter anyways, right? It could just load the image locally?

menu > [checked]:before {
  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAARklEQVQYlWNgwA+MgViQkIJ3QKzEAFVpjEPBf5giJaiAMRYF72DWKSEJlKMpgNsgiCTxH5sCbG7AqgBZ4V2sCv7//08QAwAUfjKKBs+BFgAAAABJRU5ErkJggg==");
  display: inline-block;
  height: 9px;
  margin: 0 5px;
  vertical-align: 50%;
  width: 9px;
}

score 2 · Accepted Answer · answered May 03 '12 at 02:52

2

its a Data Uri Scheme and as far as I know, the only advantage is to save HTTP requests (as everything is loaded as one, rather than fetching images).

Why its on the google chrome landing page....well, google does like to show off and use the latest tech on everything.

answered May 03 '12 at 02:52

Thomas Jones

4,892
26
34

2

is that why they still use table layout for everything? google just wants it fast – albert May 04 '12 at 16:41
1

@albert, its not just fast. `menu > [checked]:before` is not a fast selector. Also, for a local application, these are nano seconds that won't matter. Google Chrome Team is full of Web developers that like to experiment and play. :) May be that's why – Om Shankar Dec 23 '12 at 16:57

score 1 · Answer 2 · answered May 04 '12 at 16:22

I think Kirean is right, but to elaborate on the specific question title...

The binary image data is base64 encoded in the Data Uri so it can go in a text file. If the binary data was not base64 encoded it would look something like:

?PNG

IHDR           ??FIDAT?c`???X???w@??Ui?C??"%??1?`?)!    ??)?? ?$??ln??Y?]?
???O~2?ρIEND?B`?

It could include chars like " and the css parser might choke on it.

When it is base64 encoded, it will only include chars like:

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+,=

No idea on why they chose to do it that way, maybe they didn't want extra image files to manage.

Why base64Encode images in CSS?

2 Answers2