Gulpを使って画像のリサイズと圧縮の方法を学ぶ

はじめに

なぜ画像をリサイズ、圧縮する必要があるのか?

・リサイズしてファイルサイズの軽量化
・圧縮することで「ページ読み込み速度」を速められるので、SEO的にも有利になる。

インストール準備

開発環境：Mac(ターミナルを使用)

画像の操作を行うにはGulpだけではできないのでGraphicsMagickというソフトウェアをインストールします。

参考　https://www.npmjs.com/

1.ターミナルでGraphicsMagickをインストール

Taminal

brew install graphicsmagick

私の場合はこれだけだとcommand not foundとエラーになってしまったので、こちらのサイトを参考、無事にインストールできました。
http://macappstore.org/graphicsmagick/

2.モジュールをインストール
画像のサイズ変換
gulp-image-resize

画像の圧縮
gulp-imagemin　

Taminal

yarn add gulp-image-resize gulp-imagemin --dev

3.モージュールのプラグインが増えると可読性が悪くなるので一括でロードしてくれるプラグインをインポートする

Taminal

yarn add gulp-load-plugins --dev

4.gulp-load-pluginsをインストール、gulpfile.jpの内容を変更
＄の変数に格納してpipeのプロパティとして関数が使えるようになる。

gulpfile.jp

const{src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();


function copyFiles(){
      return src('./src/*')
      .pipe($.rename({
      }))
      .pipe(dest('./dest'));
}

exports.copyFiles = copyFiles;

画像サイズ変更と圧縮

1.変更する画像をデレクトリ内に用意してimages、iconのフォルダ作成

2.gulpfile.jpの内容を変更
・分かりやすいように変数名をiconの名前に変える
・imageResize,imageminを指定

gulpfile.jp

const{src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();


function icon(){
      return src('./favicon.JPG')
      .pipe($.imageResize({
        width: 100,
        height: 100,
        crop:true,//切りとる（縦横比が合わなくなる場合）
        upscale:false //拡大して画像をアップするか
      }))
　　　 .pipe($.imagemin({
      }))
      .pipe($.rename({
      }))
      .pipe(dest('./dist/images/icon'));
}

exports.icon = icon;

3.ターミナルで実行

Taminal

　gulp icon

完了した画面が表示されたらOK。

最後に

無事に画像のサイズ変更と圧縮ができました。
次は、Google PageSpeed Insightsを使ってサイトページの表示速度を測定して改善してみようと思います