gulp-imageminのプラグインによる最適化が機能しない際の対処

  • 6
    いいね
  • 0
    コメント

gulp-imageminを用いて画像を圧縮させる際に、
pngquantや非可逆圧縮としてmozjpeg等を用いようと思ったが、
圧縮率に反映されない時があったのでメモ

他の記事などを参考にimageminプラグインを追加していたが
同様の質問があり下記で解決されていた
https://github.com/sindresorhus/gulp-imagemin/issues/190

追記:下記記事にも既出でした
Gulpでpngquantを使ってPNGの減色&軽量化

うまく行かなかった記述

gulpfile.js
gulp.task('imagemin', function(){
  return gulp.src('src/images/*')
    .pipe(imagemin({
      interlaced: true,
      progressive: true,
      optimizationLevel: 5,
      use: [pngquant()]
    }))
    .pipe(gulp.dest('dist/images'));
});

うまく行った記述

imageminのv3.0.0のアップデートによると
use:[] もしくは plugins:[] は用いずに

gulpfile.js
gulp.task('imagemin', function(){
  return gulp.src('src/images/*')
    .pipe(imagemin(
      [
        pngquant()
      ],
      {
        interlaced: true,
        progressive: true,
        optimizationLevel: 5
      }
     ))
     .pipe(gulp.dest('dist/images'));
});

のように指定する必要があるよう。

現在行っている設定

gulpfile.js
var gulp = require("gulp"),
imagemin = require("gulp-imagemin"),
pngquant = require("imagemin-pngquant"),
mozjpeg = require('imagemin-mozjpeg');

gulp.task('imagemin', function(){
  return gulp.src('src/images/*')
    .pipe(plumber())
    .pipe(imagemin([
       pngquant({
         quality: '65-80',
         speed: 1,
         floyd:0
       }),
       mozjpeg({
         quality:85,
         progressive: true
       }),
       imagemin.svgo(),
       imagemin.optipng(),
       imagemin.gifsicle()
     ]
  ))
  .pipe(gulp.dest('dist/images'));
});

のように指定して圧縮しています。
qualityの値は潰れ具合を見て調整が必要なのと、
余計な指定もある気がしていますが
pngquant,optipng両方指定したほうがサイズが減ったので一応

追記:下記記事にもあるoptipngによるガンマ情報の除去が行われるからかもしれません、なので記事中にあるようなもう一度imagemin()をかませる手間が減ってるかも
【Gulp】pngquantで圧縮した画像がMacで暗くなる場合の対処法