css-inline-images

Simple node module for inlining images as base64 strings in CSS.

Installation

Install with NPM like any other package

npm install css-inline-images

Usage

Append ?embed to the urls of the images that you want inlined

var cssInlineImages = require('css-inline-images'),
    inputCss,
    outputCss;

inputCss = [
    '.leave-me-alone {',
        'background-image: url(file.gif);',
    '}',

    '.embed-me {',
        'background-image: url(file.gif?embed);',
    '}'
].join('');

outputCss = cssInlineImages(inputCss, {
    webRoot: 'web',
    path: 'otherImages'
});

The module will search for url() declarations in your CSS code so its use is not limited to background images.

Options

• webRoot The web root of your web project. This property will be used as a start point for all file paths. This is enough for absolute urls (e.g. url(/images/file.gif?embed))

• path Used in addition to webRoot to determine the paths for relative urls (e.g. url(images/file.gif?embed))

Example

With these options the following paths will be used to locate the images in the filesystem

{
    webRoot: 'web',
    path: 'otherImages'
}

• url(/images/file.gif?embed) => web/images/file.gif
• url(file.gif?embed) => web/otherImages/file.gif