Giter Club home page Giter Club logo

grunt-image's Introduction

About

Optimize PNG, JPEG, GIF, SVG images with grunt task.

Build Status NPM version Dependency Status devDependency Status Analytics

Install

$ npm install --save-dev grunt-image

Usage

This is an example of gruntfile.js.

module.exports = function (grunt) {
  grunt.initConfig({
    image: {
      static: {
        options: {
          pngquant: true,
          optipng: true,
          advpng: true,
          zopflipng: true,
          pngcrush: true,
          pngout: true,
          mozjpeg: true,
          jpegRecompress: true,
          jpegoptim: true,
          gifsicle: true,
          svgo: true
        },
        files: { 
          'dist/img.png': 'src/img.png',
          'dist/img.jpg': 'src/img.jpg',
          'dist/img.gif': 'src/img.gif',
          'dist/img.svg': 'src/img.svg'
        }
      },
      dynamic: {
        files: [{
          expand: true,
          cwd: 'src/', 
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'dist/'
        }]
      }
    }
  });
    
  grunt.loadNpmTasks('grunt-image');
};

options attributes are optional.
If you don't want to set as optimizer, set false.
When you omitted, the optimizer will be applied.

Result

PNG Optimizers

pngquant

--speed N         speed/quality trade-off. 1=slow, 3=default, 11=fast & rough
--quality      min-max don't save below min, use less colors below max (0-100)

optipng

-fix           enable error recovery
-oN
-i <type>   PNG interlace type (0-1)
-strip <objects>  strip metadata objects (e.g. "all")

advpng

--recompress      Recompress the specified files
--shrink-extra    Compress extra (7z)

zopflipng

-m: compress more: use more iterations (depending on file size) and use block split strategy 3
--iterations=[number]: number of iterations, more iterations makes it slower but provides slightly better compression. Default: 15 for small files, 5 for large files.
--lossy_transparent: remove colors behind alpha channel 0. No visual difference, removes hidden information.
--lossy_8bit: convert 16-bit per channel image to 8-bit per channel.
--filters=[types]: filter strategies to try:
 0-4: give all scanlines PNG filter type 0-4
 m: minimum sum
 e: entropy
 p: predefined (keep from input, this likely overlaps another strategy)
 b: brute force (experimental)
 By default, if this argument is not given, one that is most likely the best for this image is chosen by trying faster compression with each type.
 If this argument is used, all given filter types are tried with slow compression and the best result retained. A good set of filters to try is --filters=0me.

pngcrush

-rem chunkname (or "alla" or "allb")
-brute (use brute-force: try 148 different methods)
-reduce (do lossless color-type or bit-depth reduction)

pngout

-s# Select strategy. 0:Xtreme(default), 1:Intense, 2:Longest Match,
   3:Huffman Only, 4:Uncompressed
-k(Chunk,Chunk,..) Preserve only named chunk(s). Example: -kgAMA,bKGD,tEXt
-f# PNG output filter: 0=none, 1=�x, 2=�y, 3=�x&y, 4=Paeth, 5=mixed, 6=reuse

JPEG Optimizers

jpegtran

-optimize      Optimize Huffman table (smaller file, but slow compression)
-progressive   Create progressive JPEG file

jpeg-recompress

-p, --progressive             Set progressive JPEG output
-s, --strip                   Strip metadata

jpegoptim

--strip-all       strip all (Comment & Exif) markers from output file
--strip-iptc      strip IPTC markers from output file
--strip-icc       strip ICC profile markers from output file
--all-progressive force all output files to be progressive

GIF Optimizer

gifsicle

-i, --interlace               Turn on interlacing.
-O, --optimize[=LEVEL]        Optimize output GIFs.
--careful                     Write larger GIFs that avoid bugs in other programs.

SVG Optimizer

svgo

License

MIT

grunt-image's People

Contributors

hakobera avatar kevva avatar quippertech avatar shinnn avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.