Databases
StackOverflow2013
Postsdbo
POIs embedding background image data into CSS as Base64 good or bad practice?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs embedding background image data into CSS as Base64 good or bad practice?
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDimitar Christoff
    1. USDimitar Christoff
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIs embedding background image data into CSS as Base64 good or bad practice?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POIs embedding background image data into CSS as Base64 good or bad practice?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POIs embedding background image data into CSS as Base64 good or bad practice?
      1. USLuke Antins
      1. VTFavorite
    1. CODo some test runs? Would be interesting how much the compression can compensate the fact you base64 encode it.
      singulars
      1. POIs embedding background image data into CSS as Base64 good or bad practice?
      1. USDykam
    2. COposted the results of the test, also avail on my blog http://fragged.org/compressing-jpeg-images-via-base64-data-and-gzip-deflating_1264.html
      singulars
      1. POIs embedding background image data into CSS as Base64 good or bad practice?
      1. USDimitar Christoff
    3. COGood Question. Just wanted to add that it doesnt work for IE7 and below. But there is some work arounds. Here is a nice article about it http://jonraasch.com/blog/css-data-uris-in-all-browsers
      singulars
      1. POIs embedding background image data into CSS as Base64 good or bad practice?
      1. USMartinF
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload