こんにちは。
今回はGulpを使った画像のwebp変換、画像圧縮を紹介します。
Google PageSpeed Insightsでwebpにしろや！
と怒られるので、IEが消滅してくれた今、webpに挑戦してはいかがでしょうか。
一度構築すればその後コマンド一発で使えるのでぜひ使ってみてください。
目次
前提知識
Node.js(npm)はインストール済み、Gulpの使い方がわかっていることを前提として進めていきます。
わからない、忘れた、ちょっと自信のないというかたは下記動画を見ればOK！
package.json
{
"name": "image-dev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-changed": "^4.0.3",
"gulp-imagemin": "^7.1.0",
"gulp-webp": "^4.0.1",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.2"
}
}
webp変換
const { src, dest} = require('gulp');;
const changed = require('gulp-changed');
const webp = require('gulp-webp');
function imageWebp() {
return src(['./src/**/*.png', './src/**/*.jpg', './src/**/*.jpeg'])
.pipe(changed('./dist/webp'))
.pipe(webp({
quality: 60,
method: 6
}))
.pipe(dest('./dist/webp'));
}
exports.webp = imageWebp;gulp webpフォルダ名などはお好みで。
オプションのqualityに関してはいろいろ試してみてください。
自分の環境だと60でイイ感じでした（50とかだと荒くなった）
画像圧縮
const { src, dest } = require('gulp');
const changed = require('gulp-changed');
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
// 画像圧縮
function imageMini() {
return src(['./src/**', '!./src/**/*.webp'])
.pipe(changed('./dist/min'))
.pipe(
imagemin([
pngquant({
quality: [0.65, 0.7],
speed: 1,
}),
mozjpeg({ progressive: true, quality: 65 }),
imagemin.svgo({
plugins: [{ removeViewBox: false }],
}),
imagemin.optipng(),
imagemin.gifsicle({ optimizationLevel: 3 }),
])
)
.pipe(dest('./dist/min'));
}
exports.imagemin = imageMini;gulp imageminこちらもフォルダ名、qualityはご自由に設定ください。
画像圧縮後にwebp変換
元のjpegやpngが大きいとwebp化しても最終的なサイズはそれなりに大きくなります。
なので、こちらは画像圧縮→webpとしてできるだけ小さいサイズにする方法になります。
const { src, dest } = require('gulp');
const changed = require('gulp-changed');
const webp = require('gulp-webp');
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
function webpmin() {
return src(['./src/**/*.png', './src/**/*.jpg', './src/**/*.jpeg'])
.pipe(changed('./dist'))
.pipe(
imagemin([
pngquant({
quality: [0.65, 0.7],
speed: 1,
}),
mozjpeg({ progressive: true, quality: 65 }),
imagemin.svgo({
plugins: [{ removeViewBox: false }],
}),
imagemin.optipng(),
imagemin.gifsicle({ optimizationLevel: 3 }),
])
)
.pipe(webp({
quality: 65,
method: 6
}))
.pipe(dest('./dist'));
}
exports.webpmin = webpmin;gulp webpminこちらも設定値はそれぞれイジって試してみてください。
もしかしたら、gulpのseriesでつなげればいいのに新たな関数作って無駄じゃねと思うかもしれません。
しかし、seriesで画像圧縮とwebpを繋ぐと個々の運用がフォルダ構成上きびしくなります。（画像圧縮なしでwebpのみやりたい場合など）
なのでこういうふうな形で私は運用しています。
まとめ
以上になります。
一度構成してしまえばあとはずっとコマンド一発なのでwebサービスをつかってポチポチやるより断然ラクかと思います。
ぜひ使ってみてください。
