script to automate embedding of base64 images in CSS files
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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


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


quick experiment on datauris / mhtml images embedding.

Quick start

Install the package

  git clone 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
  unzip -d images/

then run

datauri examples/example.css


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

datauri help


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.


  • 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:!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:!somestring);

mhtml: have to use absolute urls..

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


  • 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" />
<!--[if lte IE 7]>
  <link href="assets/silk-mhtml.css" media="screen" rel="stylesheet" type="text/css" />

Thus producing two version of the css files.