北村聡士のブログ

  1. ホーム
  2. プログラミング
  3. フロントエンド

gulpで画像サイズ変更

ブログに使う画像を処理する時に、リサイズしてファイルサイズを軽量に調整してほしい。gulpだとimageminを使うようだ。

説明書

元画像が別ファイルとして残っているので、ロスレスである必要もないし、ファイルサイズを抑えられる別のオプティマイザーを使う。

環境

$ node -v

v6.9.1

 
$ npm -v

3.10.8

インストール

npm install --save-dev gulp-image-resize gulp-imagemin imagemin-jpegoptim imagemin-pngquant

imagesタスク

images.babel.js
import gulp from 'gulp';

import gulpLoadPlugins from 'gulp-load-plugins';

import pngquant from 'imagemin-pngquant';

import jpegoptim from 'imagemin-jpegoptim';

 
const $ = gulpLoadPlugins();

 
const imageSrc = 'frontend/app/images/**/*.+(jpg|jpeg|png|gif|svg)';

const imageBase = 'frontend/app/images';

const imageDest = 'public/images';

 
var imageminOptions = {

  optimizationLevel: 2,

  progressive: true,

  interlaced: true,

  svgoPlugins: [{cleanupIDs: false}]

};

 
var getPlugins = (pngQuality, jpegQuality) => {

  return [

    $.imagemin.gifsicle(),

    jpegoptim({progressive: true, max: jpegQuality}),

    pngquant({quality: pngQuality, speed: 1, posterize: 4}),

    $.imagemin.svgo(),

  ];

};

 
var getResizeOptions = (width) => {

  return {

    width: width,

    upscale: false,

    imageMagick: true

  };

};

 
gulp.task('images:mobile', () => {

  const resizeOptions = getResizeOptions(400);

  const plugins = getPlugins('70-90', 60);

 
  return gulp.src(imageSrc, {base: imageBase})

    .pipe($.changed(imageDest))

    .pipe($.imageResize(resizeOptions))

    .pipe($.imagemin(plugins, imageminOptions))

    .pipe($.rename((path) => {

      path.basename += '-small';

    }))

    .pipe(gulp.dest(imageDest));

});

 
gulp.task('images', ['clean:public:images', 'images:mobile']);

このタスクを実行すると、モバイル向けに小さめサイズの画像を生成できる。

npm run gulp images

運用方法

一度最適化した画像は何度も最適化する必要はないし、最適化が完了した画像はS3などに保存しておいて、必要な時に取りに行く方がgulpの実行時間が減らせると思う。と考えると、defaultタスクからはimagesタスクを外しておいて、画像を追加した時だけimagesタスクを実行し、S3に保存するというのが良さそう。

S3に画像をアップロードすると、AWS Lambdaで画像を最適化して、S3に保存してくれる、というのが一番いい方法かもしれない。その場合、どのくらいのファイルサイズになるか、最適化オプションを調整したい時にはこのタスクが役に立つと思う。