Search code examples
cssbase64background-imagedata-uri

Why base64Encode images in CSS?

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;
}
Solution

  • 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.