couragenki

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

Github はこちら

https://github.com/couragenki/imagemin_gulp

Github からクローンした場合の手順

node などの環境構築が既にできていれば下記の 3 ステップで画像圧縮ができます

1.クローンする (もしも URL 変わってたら Github からクローンしてください)

 git clone https://github.com/couragenki/imagemin_gulp.git

2.nodemodule をインストール

 git clone https://github.com/couragenki/imagemin_gulp.git

3.実行

gulp img

Node の環境などが用意できていない場合

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

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

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

実行準備

1 nodebrew をインストール

nodebrew をインストールするにはhomebrewをインストールしてください。 (デザイナーさんなど普段 node を使用してない方は 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 をインストール

imagemin

npm i gulp-imagemin

9 imagemin-mozjpeg をインストール

imagemin-mozjpeg

npm i imagemin-mozjpeg

10 imagemin-pngquant をインストール

imagemin-pngquant

npm i imagemin-pngquant

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

スクリーンショット 2019-02-09 17.35.34.png

├ dist　　　　　　　　　　　　　　　　　　 ・圧縮した画像が置かれる　(ディストリビューションの略)
├ gulpfile.js                        ・gulｐの設定を行う
├ node_modules                       ・nodeの設定が補完される
├ package-lock.json                  ・nodeのバージョンを表記する
├ package.json                       ・nodeの設定を記述する
└ src                                ・圧縮前の画像を保管する

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

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,PNG,JPG,GIF}")
    .pipe(
      imagemin([
        pngquant("65-80"),
        mozjpeg({
          quality: 80,
          progressive: true,
        }),
        imagemin.svgo(),
        imagemin.optipng(),
        imagemin.gifsicle(),
      ])
    )
    .pipe(gulp.dest(distDir));
});

実行

上記を設定のうえ実行します。

gulp img

png 画像を圧縮

圧縮前 (37KB)

test.png

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

圧縮後 (12KB)

test.png

jpg 画像を圧縮

スマホで撮った写真を圧縮してみる。

圧縮前 (1.9MB)

test.jpg

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

圧縮後 (1.2MB)

test.jpg

まとめ

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

・基本的に gulpfile.js を変更すれば設定を変更可能です。 ・細かい圧縮の設定などを変更したい場合はリンクの公式のオプションを参考にしてみてください。

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

frontendの記事一覧へ戻る