node package manager

grunt-data-uri

Convert to data-uri from image path.

grunt-data-uri

This is gruntplugin task.

Convert to data-uri from image path

Install from npm.

% npm i -D grunt-data-uri

Add your project's Gruntfile.js.

grunt.loadNpmTasks('grunt-data-uri');
grunt.initConfig({
  // sample configuration 
  dataUri: {
    dist: {
      // src file 
      src: ['sample/css/raw/*.css'],
      // output dir 
      dest: 'sample/css',
      options: {
        // specified files are only encoding 
        target: ['sample/img/embed/*.*'],
        // adjust relative path? 
        fixDirLevel: true,
        // img detecting base dir 
        // baseDir: './' 
 
        // Do not inline any images larger 
        // than this size. 2048 is a size 
        // recommended by Google's mod_pagespeed. 
        maxBytes : 2048
 
      }
    }
  }
}

For traversal image files. If options.baseDir is specified, use baseDir instead of src css exsting dir. That's useful when image paths in your css are absolute.

This file is raw css.

html { background-image: url('../../img/embed/will_encode.jpeg'); }
body { background-image: url('../../img/embed/not_encode.jpeg'); }
div  { background-image: url('../../img/not_encode.png'); }

Execute grunt-data-uri

% grunt dataUri
Running "dataUri:dist" (dataUri) task
 
SRC: 3 file uri found on sample/css/raw/main.css
>> Encode: ../../img/embed/will_encode.jpeg
>> Skipping (size 24875 > 10240): ../../img/embed/not_encode.jpeg
>> Adjust: ../../img/not_encode.png -> ../img/not_encode.png
>> => path/to/project/sample/css/main.css
 
Done, without errors.

This file is processed and output css.

/* encoded to data-uri(base64) */
html { background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAAQA...'); }
/* not encoded too large image */
body { background-image: url('../../img/embed/not_encode.jpeg'); }
/* not encoded but adjust relative path! */
div  { background-image: url('../img/not_encode.png'); }
npm install
npm test
  • 0.3.0
    • Update data-uri module
    • Remove query and hash fragment from url
  • 0.2.0
    • Add maxBytes option
    • fix fixDirLevel bug
  • 0.1.0
    • Add baseDir option
  • 0.0.2
    • Add datauri module
  • 0.0.1
    • first commit

MIT