Share

こんにちは、マスダです。

飽きもせずgulp関連の記事を書いていきます。

過去の記事は以下のとおりです。

今回はgulp-imageminを使った簡単画像圧縮の方法を紹介したいと思います。

画像を圧縮するメリット

まずは、画像を圧縮するメリットをいくつか紹介したいと思います。

ページ読み込み速度を改善できる

Webサイトを作成する上で欠かせない画像ですが、近年高解像度のディスプレイが標準化してきた影響で、高解像度な画像を使用することが多くなってきています。

しかし、高解像度の画像はデータサイズが大きく、ページの読み込み速度に多大な影響があります。

表示速度が与える影響は下記の通りです。

  表示速度が1秒から3秒に落ちると、直帰率は32%上昇

  表示速度が1秒から5秒に落ちると、直帰率は90%上昇

引用元:

表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命

 画像を圧縮して、読み込みに必要なデータ量を減らすことができれば、表示速度が改善し、直帰率も抑えることにもつながります。

Googleでの検索順位が上がる(可能性がある)

ページの読み込み速度が検索順位に影響を与える仕組みは、Googleでは2010年4月にPC検索で、モバイルでも2018年7月から導入しています。

 引用元:

Using site speed in web search ranking

引用元:
ページの読み込み速度をモバイル検索のランキング要素に使用します

表示速度に影響するのは、画像サイズだけではありませんが、大事な要素です。

メリットがわかったところで、早速gulp-imageminの準備をしていきたいと思います。

gulp-imageminを準備

今回のディレクトリ構造は以下のとおりです。

gulpfile.js 
node_modules 
package-lock.json 
package.json 
dest     //出力先フォルダ
 └  img
dev       //開発フォルダ
  └  img
      ├ sample.jpg
      ├ sample.png
      ├ sample.gif
      └  sample.svg

例のごとく、npmを使ってgulpとgulp-imageminをインストールします。

npm init
npm i  -D gulp gulp-imagemin

インストールが完了したら、gulpfile.jsを編集していきましょう。

gulpfile.jsを編集


const gulp = require('gulp');
const imagemin     = require('gulp-imagemin');

gulp.task('image', ()=>{
  return gulp.src('dev/img/*')
      .pipe(imagemin([
        imagemin.jpegtran({
          progressive: true,  //ロスレス圧縮をするか
        }),
        imagemin.optipng({
          optimizationLevel: 7
        }), // 圧縮レベルを1〜7で設定
        imagemin.gifsicle({
          optimizationLevel: 3,  //圧縮レベルを1〜3で設定
          colors: 128  //使用する色数を1から256色の間で設定
        }),
        imagemin.svgo({
            plugins: [
                {removeViewBox: true},
                {cleanupIDs: false}
		// 上記2つで、svgファイルの中のコードを可能な限り削減します。
            ]
        })
    ]))
      .pipe(gulp.dest('dest/img'))
  });

圧縮を実行

下記のコマンドで実行します。

gulp image

結果はこんな感じです。

gulp image
Using gulpfile ~/Desktop/sample/gulpfile.js
Starting 'image'...
gulp-imagemin: Minified 4 images (saved 2.36 MB - 15.6%)
Finished 'image' after 1.71 s

見事に15.6%圧縮されています。

各データの圧縮前後のデータ量はこんな感じです。

圧縮前

画像圧縮前

圧縮後

画像圧縮後

ちなみに、オプションを全部外した場合は、こんな感じです。

gulp image
Using gulpfile ~/Desktop/sample/gulpfile.js
Starting 'image'...
gulp-imagemin: Minified 2 images (saved 1.44 MB - 10.2%)
Finished 'image' after 1 s

ちょっとだけ圧縮率が高くなってるのがわかるかと思います。

おわりに

画像の圧縮って結構面倒なんですが、gulpを使えば一気にできるので便利です。

今回はコマンド入力して圧縮する方法を紹介しましたが、タスクの登録次第では画像がフォルダに入るタイミングなどで自動的に圧縮されるように設定することも可能です。

その辺りはおいおい紹介していこうと思います。

株式会社 ヤップ エンジニア

升田 圭亮

ヤップのコーディング、プログラミング担当。日々学んだことを発信。

記事中の画像データを使いたい!や、この記事もっと詳しく書いて欲しいなどのご要望、ご意見は上記お問合せをクリック、もしくはお電話ください。

06-6445-7317