bezoerbPostCSS Image Inliner 
PostCSS plugin to inline local/remote images.
.foo {
/* Input example */
background-image: url('https://placehold.it/10x10');
}
.foo {
/* Output example */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAo ... ORK5CYII=');
}
Installation
npm i -D postcss postcss-image-inliner
Usage
const postcss = require('postcss');
const imageInliner = require('postcss-image-inliner');
const opts = {
assetPaths: [], // List of directories where the inliner should look for assets
maxFileSize: 10240, // Sets a max file size (in bytes)
};
postcss([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.