Skip to content
This helper will inject images and fonts into your css files.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.js
package.json

README.md

GULP inline-base64

This helper will inject images and fonts into your css files.

Warning ! This technique is really efficient with small files (<14 Kb) cause it avoids DNS requests and makes the page loading faster. But for larger files it will be a mistake to use it !

Install it

npm install --save-dev gulp-inline-base64

Use it

Here is my sass config. As you can see, I use the 'maxSize' option to specitfy that files larger than 14kb are not injected into the css file.

var sass = require('gulp-sass'),
	inline_base64 = require('gulp-inline-base64'),
	autoprefixer = require('gulp-autoprefixer');
...

// SASS
gulp.task('sass', function() {
    return gulp.src([
        path_src + '/css/**/*.scss',
        '!' + path_src + '/css/**/_*.scss'
    ])
    .pipe(sass({
        includePaths: [
            path_src + '/css/',
            'bower_components/',
        ],
        imagePath: path_src
    }))
    .pipe(inline_base64({
        baseDir: path_src,
        maxSize: 14 * 1024,
        debug: true
    }))
    .pipe(autoprefixer("last 2 version", "> 1%", {
        cascade: true
    }))
    .pipe(gulp.dest(path_tmp + '/css'))
});

Options

  • baseDir : the root path for assets
  • useRelativePath : overrides baseDir; root path is relative to the input file's directory
  • maxSize : define the limit size of injected assets
  • debug : show debug messages

Force asset injection

In your css file, just add ,true to the image url : it will force the asset to be injected in base64 in css file, event if the maxSize is reached.

div.logo {
	background: transparent url(/img/logo.png,true) no-repeat center center;
}
You can’t perform that action at this time.