Convert to data-uri from image path
JavaScript
Latest commit 46ac0a9 Nov 18, 2015 @ahomu Merge pull request #19 from ahomu/development
Update 0.3.0
Permalink
Failed to load latest commit information.
tasks remove unused var Nov 13, 2015
test oops... add test script Nov 18, 2015
.gitignore replace sample to test Nov 13, 2015
.npmignore es5 strict and datauri module Oct 17, 2012
AUTHORS add AUTHORS Nov 18, 2015
Gruntfile.js replace sample to test Nov 13, 2015
LICENSE-MIT initialize Oct 14, 2012
README.md update 0.3.0 Nov 18, 2015
package.json oops... add test script Nov 18, 2015

README.md

grunt-data-uri

npm version build status Dependency Status

This is gruntplugin task.

Convert to data-uri from image path

Getting Started

Install from npm.

% npm i -D grunt-data-uri

Add your project's Gruntfile.js.

grunt.loadNpmTasks('grunt-data-uri');

Example

Config

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.

Before sample/css/raw/main.css

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

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.

After sample/css/main.css

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

Tests

npm install
npm test

Changelog

  • 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

License

MIT