imacss

pronunciation: imax

An application and library that transforms image files to data URIs (rfc2397) and embeds them into a single CSS file as background images.

Let's say you have a web-based frontend which embeds a lot of images (e.g. icons). This referencing produces HTTP requests for every single image. What if you would like to minimize it to just one request? That is something

imacss

What?

Okay, enough words. Let's dive straight into a transformation example. If we assume that you have two SVGs, like

github.svg

quitter.svg

imacss

.imacss.imacss-github {
    background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEBg...);
}

.imacss.imacss-quitter {
    background:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhADA...);
}

You can refer to this images by using the respective CSS classes:

...

CLI

imacss

Installation

Install with npm globally.

npm install -g imacss

Usage examples

Embed all SVGs in a particular directory and all its subdirectories (will pipe the output to stdout).

$ imacss "~/projects/webapp/images/**/*.svg"

Embed all SVGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.

$ imacss "~/projects/webapp/images/*.svg" > images.svg.css

Embed all SVGs and PNGs in a particular directory and transfer them to a CSS file which will be saved in the CWD.

$ imacss "~/projects/webapp/images/*.{svg,png}" > images.css

If you don't like the

imacss

$ imacss "~/projects/webapp/images/*.{svg,png}" foobar > images.css

will produce this selector structure in the CSS file:

.foobar.foobar-github {...}

Important: Please note that

imacss

image/svg+xml

base64

utf-8

API

If you would like to use the

imacss

Install

Install with npm

npm install --save imacss

Methods

transform(glob[, namespace]);

Transforms the image files from the specified glob and returns a stream with the CSS selectors that can be piped to somewhere else.

Arguments

glob

String || Vinyl file object

The path to the images which should be transformed. You can use any glob pattern you want or you're also able pass single Vinyl file objects.

namespace

String || Function

A string containing the css class namespace prefix, or a function to generate the entire CSS ruleset.

The CSS selector namespace.

Usage example

var imacss = require('imacss');

imacss
    .transform('/path/to/your/images/*.png')
    .on('error', function onError (err) {
        console.error('Transforming images failed: ' + err);
    })
    .pipe(process.stdout);

Passing a function to customize the resulting CSS rule set

var imacss = require('imacss');

function generateCss(image) {
    return '.image-' + image.slug + ' { ' + 'background-image:' + 'url('' + image.datauri + ''); }';
}
imacss
    .transform('/path/to/your/images/*.png', generateCss)
    .on('error', function (err) {
        console.error('Transforming images failed: ' + err);
    })
    .pipe(process.stdout);

Author

Copyright 2014 - 2015, André König ([email protected])