[!NOTE] This project is preserved as a historical open-source project. It is not actively maintained, and its dependencies or recommended practices may be outdated.

I’m keeping it public because it may still be useful as reference material. If you rely on it in production, please review the code carefully and consider maintaining your own fork.

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 can do for you.

What?

Okay, enough words. Let's dive straight into a transformation example. If we assume that you have two SVGs, like github.svg and quitter.svg, imacss will generate this CSS code for you.

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

<div class="imacss imacss-quitter">...</div>

CLI

imacss comes with a command-line interface which pipes the output to stdout by default (yeah, plain old text streams FTW!).

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