IMG: Automatic Image Optimization with Gulp

Aug 19 2017- POSTED BY projecth 0 Comment

You can optimize images using one of the following Gulp modules:

  1. gulp-tinypng
  2. gulp-image
  3. gulp-imagemin

 

TinyPNG’s Open API

Use TinyPNG’s open API with Gulp.

  1. You need to register with TinyPNG API first to get your key.
  2. Create a separate Gulp task for image compression.
  3. Run task: > gulp tinypng
Module Name Module Keyword Role
Basic Gulp Script ‘gulp’ Basic definitions.
Concat Module ‘gulp-tinypng’ TinyPNG Compression.

gulp.js

var gulp = require('gulp');
var tingpng = require('gulp-tinypng');

gulp.task('tinypng', function () {
    gulp.src('./src/images/*')
        .pipe(tingpng('2zx4kaT2LbShfgxlj_h8Xj_y4bZKJ7NN'))
        .pipe(gulp.dest('./dist/images'));
});

gulp.task('default', ['tinypng']);

 

Gulp Image

  1. Free. No registration required. But more specification is needed to run the script with no errors.
  2. Create a separate Gulp task for image compression.
  3. Run task: > gulp image
Module Name Module Keyword Role
Basic Gulp Script ‘gulp’ Basic definitions.
Concat Module ‘gulp-image’ Gulp Image Compression.

gulp.js

const gulp = require('gulp');
const image = require('gulp-image');

gulp.task('image', function () {
  gulp.src('./src/images/*')
    .pipe(image({
      pngquant: true,
      optipng: false,
      zopflipng: true,
      jpegRecompress: true,
      jpegoptim: false,
      mozjpeg: false,
      gifsicle: true,
      svgo: true
    }))
    .pipe(gulp.dest('./dist/images'));
});

gulp.task('default', ['image']);

 

Gulp ImageMin

Free. No registration required. But more specification is needed to run the script with no errors.

  1. Create a separate Gulp task for image compression.
  2. Run task: > gulp imagemin
Module Name Module Keyword Role
Basic Gulp Script ‘gulp’ Basic definitions.
Concat Module ‘gulp-imagemin’ Gulp ImageMin Compression.

gulp.js

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('imagemin', () =>
    gulp.src('./src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'))
);

gulp.task('default', ['imagemin']);