node-datauri(1) -- node-script to automate the embedding of base64 images in CSS files

Usage

datauri path/to/css/file.css
datauri css/*.css

Description

quick experiment on datauris / mhtml images embedding.

Quick start

Install the package

  git clone git://github.com:mklabs/node-datauris.git && cd node-datauris && npm link

once in npm, running npm install will be easier, but for now a git clone + npm link is enough.

To run the script on the example files in css/, first, get the icon set.

  wget wget http://www.famfamfam.com/lab/icons/silk/famfamfam_silk_icons_v013.zip
  unzip famfamfam_silk_icons_v013.zip -d images/

then run

datauri examples/example.css

documentation

To display the documentation (simply this readme for now), just run

datauri help

Ressources

Recommandation from documentcloud/jammit:

It's not recommended to embed all of your site's images, just the ones that conform to the following three rules:

Images that are small. Large images will simply delay the rendering of your CSS. Jammit won't embed images larger than 32 kilobytes, because Internet Explorer 8 won't render them.
Images that are immediately visible. It's better to leave the images that are hidden at page load time to download in the background.
Images that are referenced by a single CSS rule. Referencing the same embedded image in multiple rules will cause that image's contents to be embedded more than once, defeating the purpose. Replace the duplicated rules with an image-specific HTML class, and you're good to go.

Plan

only images that are small < 32kilobytes
dealing with IE < 8: use of mhtml

use of datauris for modern browser, use of mhtml for IE < 8

with a build script, using stoyan's snippet

#myid {
  /* normal browsers */
  background-image: url("data:image/png;base64,iVBORw0[...snip...]");
  /* IE < 8 targeted with the star hack */
  *background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

or with <html /> conditional comments

.mystuff {
  /* normal browsers */
  background-image: url("data:image/png;base64,iVBORw0[...snip...]");
}

.ie6 .mystuff, .ie7 .mystuff {
  /* IE < 8 */
  background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

mhtml: have to use absolute urls.. http://msdn.microsoft.com/en-us/library/ms526265(v=exchg.10).aspx

Content-Base gives an absolute URL base, or "starting point",for relative URLs that appear in other MIME headers and in HTML documents that do not contain any BASE HTML elements. Content-Location specifies the URL that corresponds to the content of the body part that contains this header.

Drawbacks

inlining image content twice
overall css size increase

to avoid double size increase, probably the best way to use both datauris/mhtml would be to rely on something like this:

<!--[if (!IE)|(gte IE 8)]><!-->
  <link href="assets/silk-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
  <link href="assets/silk-mhtml.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

Thus producing two version of the css files.

About

script to automate embedding of base64 images in CSS files

Languages

Language:JavaScript 100.0%