title: Is embedding background image data into CSS as Base64 good or bad practice?
body: <p>I was looking at the source of a greasemonkey userscript and noticed the following in their css:</p>
  
  <pre><code>.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
  </code></pre>
  
  <p>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:</p>
  
  <ol>
  <li>It will reduce the amount of HTTP requests on page load, thus enhancing performance</li>
  <li>If no CDN, then it will reduce the amount of traffic generated through cookies being sent alongside of images</li>
  <li>CSS files can be cached</li>
  <li>CSS files can be GZIPPED </li>
  </ol>
  
  <p>Considering that IE6 (for instance) has problems with cache for background images, this seems like it's not the worst idea...</p>
  
  <p>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?</p>
  
  <p><strong>update - results of testing</strong></p>
  
  <ul>
  <li><p>testing with image: <a href="http://fragged.org/dev/map-shot.jpg" rel="noreferrer">http://fragged.org/dev/map-shot.jpg</a> - <strong>133.6Kb</strong> </p></li>
  <li><p>test URL: <a href="http://fragged.org/dev/base64.html" rel="noreferrer">http://fragged.org/dev/base64.html</a></p></li>
  <li><p>dedicated CSS file:
  <a href="http://fragged.org/dev/base64.css" rel="noreferrer">http://fragged.org/dev/base64.css</a> -
  <strong>178.1Kb</strong> </p></li>
  <li><p>GZIP encoding server side </p></li>
  <li><p>resulting size sent to client (YSLOW
  components test): <strong>59.3Kb</strong> </p></li>
  <li><p>Saving of data sent to client browser of: <strong>74.3Kb</strong></p></li>
  </ul>
  
  <p>Nice, but it will be slightly less useful for smaller images, I guess.</p>
  
  <blockquote>
    <p>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 <code>#perfmatters: Instant mobile web apps</code>. See <a href="http://developer.chrome.com/devsummit/sessions" rel="noreferrer">http://developer.chrome.com/devsummit/sessions</a> and keep that in mind - <a href="https://docs.google.com/presentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194" rel="noreferrer">actual slide</a></p>
  </blockquote>