Gulpでいろんなフォーマットの画像を一括で圧縮する
最終更新日: Update!!
フロントエンドのコーディングには欠かせなくなったタスクランナーのGulpですが、過去にはSassのコンパイルやCSSのミニファイ化などを紹介しましたが、今回は画像ファイルの圧縮をGulpを使って一括で行いたいと思います。
Gulpにはコーディングのフローに合わせていろんなタスクを登録しているのですが、私自身この画像圧縮もタスクに登録していて、かなり重宝しています。
今回の画像圧縮ですが、PNG、JPG、GIF、SVGと主要な画像フォーマットを全てカバーします。そこで今回は3つのパッケージをインストールする形になります。プロジェクトディレクトリに移動して、下記のコマンドを入力しそれぞれのパッケージをインストールします。
いかがでしょうか、近年はモバイル端末の普及により、サイトの高速化が重要になってきています。そんな時には画像の圧縮はかなり効果的ですね。Gulpでタスク登録する場合には、画像がフォルダに入るタイミングなどで自動的に圧縮されるようにしておくと便利です。
$ npm install --save-dev gulp-imagemin $ npm install --save-dev imagemin-pngquant $ npm install --save-dev imagemin-mozjpegPNG画像の圧縮には「pngquant」というパッケージのプラグインを、JPG画像の圧縮には「mozjpeg」というパッケージのプラグインを、SVGとGIFには「gulp-imagemin」のパッケージに同梱されている「svgo」と「gifsicle」というプラグインを使用します。 今回は下記のようなディレクトリ構成で説明しています。minフォルダに圧縮済みの画像が入る形になります。
img - sample.jpg - sample.png - sample.gif - sample.svg - min gulpfile.js node_moodulesこれまでと同じようにgulpfile.jsに画像圧縮のタスクを記述していきます。PNG、JPG、GIF、SVGと全てのフォーマットが対象になるようにしています。 【gulpfile.js】
gulp.task('imagemin', function () { gulp.src('img/*.{jpg,jpeg,png,gif,svg}') .pipe(imagemin( [ pngquant({ quality: '65-80', speed: 1 }), mozjpeg({ quality: 80 }), imagemin.svgo(), imagemin.gifsicle() ] )) .pipe(gulp.dest('img/min')); });上記ではpngquantとmozjpegの実行時に適用されるオプションを指定しています。qualityは圧縮の画質指定になります。speedは圧縮にかかる時間を指定します。軽量化を目指すのであれば上記の内容でとりあえず大丈夫なのではないでしょうか。では実際に上記のタスクをコマンドにて実行してみます。
$ gulp imagemin [00:00:00] Using gulpfile ~/****/****/gulpfile.js [00:00:00] Starting 'imagemin'... [00:00:00] Finished 'imagemin' after 14 ms [00:00:00] gulp-imagemin: Minified 4 images (saved 211 kB - 58.5%)コマンド一発でわずか数秒で画像が圧縮できました!実際に圧縮後のファイル容量を比較してみますとこんな感じになりました。 JPG:102kb → 25kb PNG:181kb → 53kb GIF:68kb → 68kb SVG:11kb → 4kb ここではGIF画像は容量は変わらなかったのですが、、それ以外のフォーマットについてはかなり軽量化されているのが確認できますね。
Gulpのバージョン4系で推奨されている記述方法について
Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。 【gulpfile.js】const { src, dest, watch } = require("gulp"), plumber = require('gulp-plumber'), rename = require('gulp-rename'), imagemin = require('gulp-imagemin'), mozjpeg = require('imagemin-mozjpeg'), pngquant = require('imagemin-pngquant'); const taskImagemin = () => src('src/images/*') .pipe(plumber()) .pipe(imagemin([ pngquant({ quality: [ 0.65, 0.8 ], speed: 1 }), mozjpeg({ quality: 80 }), imagemin.gifsicle({ interlaced: false }), imagemin.svgo({ plugins: [ { removeViewBox: true }, { cleanupIDs: false } ] }), ])) .pipe(rename( { suffix: '_min' } )) .pipe(dest('dist/assets/img/_min')); // Wacth const taskWatch = (done) => { watch('src/images/*', taskImagemin); done(); } exports.default = taskWatch;
いかがでしょうか、近年はモバイル端末の普及により、サイトの高速化が重要になってきています。そんな時には画像の圧縮はかなり効果的ですね。Gulpでタスク登録する場合には、画像がフォルダに入るタイミングなどで自動的に圧縮されるようにしておくと便利です。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories