Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-inline-base64 with all npm packages installed. Try it out:

var gulpInlineBase64 = require("gulp-inline-base64")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-inline-base64 v0.1.5

Convert assets to inline datauri, ideal to integrate small pictures in your css.

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');

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


  • 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;


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free