gulp-imageminを用いて画像を圧縮させる際に、
pngquantや非可逆圧縮としてmozjpeg等を用いようと思ったが、
圧縮率に反映されない時があったのでメモ
他の記事などを参考にimageminプラグインを追加していたが
同様の質問があり下記で解決されていた
https://github.com/sindresorhus/gulp-imagemin/issues/190
追記:下記記事にも既出でした
Gulpでpngquantを使ってPNGの減色&軽量化
#うまく行かなかった記述
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:[] は用いずに
gulp.task('imagemin', function(){
return gulp.src('src/images/*')
.pipe(imagemin(
[
pngquant()
],
{
interlaced: true,
progressive: true,
optimizationLevel: 5
}
))
.pipe(gulp.dest('dist/images'));
});
のように指定する必要があるよう。
##現在行っている設定
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で暗くなる場合の対処法