Edited at

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

More than 1 year has passed since last update.

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で暗くなる場合の対処法