css-inline-images

Inlines developer defined images as base64 strings in CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
css-inline-images
0.1.09 years ago9 years agoMinified + gzip package size for css-inline-images in KB

Readme

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
.leave-me-alone {
    background-image: url(file.gif);
}

.embed-me {
    background-image: url(file.gif?embed)
}

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