【コピペですぐに使える】画像圧縮機能

この記事で学べる内容

• nodeの使い方
• gulpの簡単な使い方
• imageminを使った画像圧縮

Githubはこちら

https://github.com/RantaroTech/imagemin_gulp

下記の1~11のコマンドを実行すると画像の圧縮がすぐに行えるようになります

自分で導入する際にgulpやimageminを調べたりして大変だったので非エンジニアでも使えるようにコピペだけで使えるようにまとめました。

順番にターミナルでコマンドを実行してください。

1. nodebrewをインストール

brew install nodebrew

2. yarnをインストール

brew install yarn

3. npm init (npmを使うための設定)

npm init

4. srcファイルを作成

mkdir src

5. distファイルを作成

mkdir dist

6. gulpfile.jsを作成

touch gulpfile.js

7. gulpをインストール

npm install gulp

8. imageminをインストール

https://www.npmjs.com/package/gulp-imagemin

npm install --save-dev gulp-imagemin

9. imagemin-mozjpegをインストール

https://www.npmjs.com/package/imagemin-mozjpeg

npm install imagemin-mozjpeg

10. imagemin-pngquantをインストール

https://www.npmjs.com/package/imagemin-pngquant

npm install imagemin-pngquant

ここまで実行するとこのようなディレクトリ構造になっています。

├ gulpfile.js => gulｐの設定を行う　　　　　　　　　　
├ node_modules => nodeの設定が補完される
├ package-lock.json => nodeのバージョンを表記する
├ package.json => nodeの設定を記述する
└ src => 圧縮前の画像を保管する

11. gulpfile.jsに下記をコピぺする

const gulp = require('gulp');
const distDir = 'dist';
const srcDir = 'src';
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const mozjpeg = require('imagemin-mozjpeg');

gulp.task('img', () => {
  return gulp.src(srcDir + '/*.{png,jpg,gif}')
    .pipe(imagemin([
      pngquant('65-80'),
      mozjpeg({
        quality: 85,
        progressive: true
      }),
      imagemin.svgo(),
      imagemin.optipng(),
      imagemin.gifsicle()
    ]))
    .pipe(gulp.dest(distDir));
});

gulpを実際に実行する

gulp img

Using gulpfile ~/test_gulp/gulpfile.js
Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 527 ms

６７％圧縮できました！

まとめ

画像容量を6割近く削減することができました。 デザイナーではない素人目ですが画像の劣化などあまり気になりませんでした。

・基本的に gulpfile.js を変更すれば設定を変更可能です。

・細かい圧縮の設定などを変更したい場合はリンクの公式のオプションを参考にしてみてください。

ここまでお読みいただきありがとうございました。

Tags

• javascript