PostCSS Image Inliner

PostCSS plugin to inline local/remote images.

1.foo {
2  /* Input example */
3  background-image: url('https://placehold.it/10x10');
4}

1.foo {
2  /* Output example */
3  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAo ... ORK5CYII=');
4}

Installation

1npm i -D postcss postcss-image-inliner

Usage

1const postcss = require('postcss');
2const imageInliner = require('postcss-image-inliner');
3const opts = {
4  assetPaths: [], // List of directories where the inliner should look for assets
5  maxFileSize: 10240, // Sets a max file size (in bytes)
6};
7
8postcss([imageInliner(opts)]);

See PostCSS docs for examples for your environment.

Options

assetPaths

• Type: array
• Default: [process.cwd()]
• Example: ['http://domain.de/', 'http://domain.de/styles', 'app/images', '**/images/']
• Required: false

List of directories/URLs where the inliner should start looking for assets. You can define local directories (globs supported) or URLs.

maxFileSize

• Type: int
• Default: 10240
• Example: 0
• Required: false

Sets a max file size (in bytes) for inlined images. Set to 0 to disable size checking.

largeFileCallback

• Type: function
• Default: undefined
• Example: function (file) { console.log('big file found:', file.path); return file.path }
• Required: false

Allows you to act on large files and change the url if you'd like. Make sure you have strict set to false when using this.

b64Svg

• Type: bool
• Default: false
• Required: false

Use Base64 encoding for SVGs.

svgoPlugins

• Type: array
• Default: []
• Required: false

Use custom svgo configuration for svg optimization

strict

• Type: bool
• Default: false
• Required: false

Fail on error.

filter

• Type: regex
• Default: /^(background(?:-image)?)|(content)|(cursor)/
• Required: false

Regex to match the CSS properties to be inlined.