Lego2012
10/11/2016 - 8:26 PM

Even though minifying Javascript and Stylesheets can shave off a few kilobytes, nothing compares to simply optimising images. Instead, this

Even though minifying Javascript and Stylesheets can shave off a few kilobytes, nothing compares to simply optimising images. Instead, this can save megabytes, the equivalent of removing massive frameworks like jQuery and Bootstrap.

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    jpegtran = require('imagemin-jpegtran'),
    gifsicle = require('imagemin-gifsicle'),
    optipng = require('imagemin-optipng');

gulp.task('images', ['jekyll'], function () {
  return gulp.src('images/**')
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngquant(), jpegtran(), optipng(), gifsicle()]
    }))
    .pipe(gulp.dest('_site/images'));
});