ハイパーリッリメモ

どうせ誰も見ていないと思うので、長文Twitter状態。

gulp-imageminでちゃんと画像圧縮する。

激務激務アンド激務のあと、一週間くらい暇してたら苦手にしているデザイン業務が立て続けにきてそれはそれで死んでいました。

違う、そうじゃない。

以前に書き直したgulpfile.jsを使っていて、already optimizedだったり削れても数byteだったりとどうにも画像が圧縮されないなと思っていました。

[22:45:06] gulp-imagemin: ✔ sample.gif (already optimized)
[22:45:06] gulp-imagemin: ✔ sample.jpg (already optimized)
[22:45:06] gulp-imagemin: ✔ sample.png (already optimized)
[22:45:06] gulp-imagemin: ✔ sample.svg (already optimized)

そこそこ容量でかい画像を突っ込んでみてもこれだったので、流石に何か間違ってるのではと思い始め、改めてちゃんとreadmeを読んでみると、ロスレスで圧縮を行うことが記載されています。

www.npmjs.com

pngsvgはまだわからなくもないのですが、gifやjpgがロスレスってなんぞやとは思っていたのですが、具体的にはファイル内のメタ情報などを削除してその分の容量を削減している、といった形のようです。つまり画質自体は何も手を加えていないので、当然大して容量が変わらない、ということになります。

ちゃんと圧縮させよう

パッケージの追加

jpg、pngの圧縮に以下の2つをインストールします。--save-devで良いかと思います。

  • imagemin-mozjpeg
  • imagemin-pngquant

タスクの編集

gulpfile.jsのタスクも次のように編集します。

gulp.task('images', function(){
  return gulp.src([dir.src + 'images/**/*'])
  .pipe($.changed(dir.dist + 'images/'))
  // 画像圧縮処理
  .pipe($.imagemin([
    $.imagemin.gifsicle(),
    mozjpeg({ quality: 80 }),
    pngquant(),
    $.imagemin.svgo()
  ], {
    verbose: true
  }))
  // メタ情報再削除
  .pipe($.imagemin())
  // 出力先ディレクトリ
  .pipe(gulp.dest(dir.dist + 'images/'))
  // ブラウザを更新する
  .pipe(browser.stream());
});

圧縮率はとりあえずこんなもんでいいんじゃない?といった感じで適当に決めました。verbose:true追記したのは、処理したすべての画像のログを先程貼り付けたような形でターミナルに出力してくれます。falseなら全体で何枚処理してどのくらい削減できたか、の結果だけだったはず。 2回目のimageminは、ライブラリを指定するとメタ情報などが残ることがあるので、再度imageminにかけると良い、と読んだ記憶があるのですが、それがどこで読んだのかを思い出せず…。

フォーマットごとのオプションとか。

使われているライブラリのオプションを覗いてみました。読んでみたところで細かい仕様や、指定することによってどう作用するのかがわからないものが多かったので、わかるところだけ指定してあとはもうデフォルトでいいやという投げやりな感じになってしまいました。

gifの圧縮

オプションを設定すれば圧縮方法や、使用されている色数を2〜256色の間で自由に指定もできるようです。

github.com

jpgの圧縮

画質の指定を始め、いろいろなオプションがあります。ちゃんと使いみちがあるから用意されているのだとは思いますが、とりあえず画質だけにしました。

github.com

pngの圧縮

jpgのように画質指定をしたりできます。Defaultの記載がなかったけど指定しなかった場合いくつになるんでしょう…。クオリティを犠牲にエンコード速度を指定できたりもするようです。

github.com

svgの圧縮

かなりいろいろなオプションがあります。PhotoshopIllustratorで出力するとやたらと属性が付与されてたりしますが、消したいものを指定して一括で消し飛ばす、みたいなことが出来るようです。

リンク先は「オプションはこっち見ろ」って書いてあったのでそちらを。

github.com

やってみる

レッツおビルド。

[22:40:34] Starting 'images'...
[22:40:35] gulp-imagemin: ✔ sample.gif (saved 1 B - 0%)
[22:40:35] gulp-imagemin: ✔ sample.svg (saved 460 B - 43.2%)
[22:40:35] gulp-imagemin: ✔ sample.jpg (saved 3.34 kB - 49.7%)
[22:40:35] gulp-imagemin: ✔ sample.png (saved 19 B - 1.1%)
[22:40:35] gulp-imagemin: Minified 4 images (saved 3.82 kB - 31.5%)
[22:40:35] gulp-imagemin: Minified 1 image (saved 30 B - 1.8%)
[22:40:35] Finished 'images' after 668 ms

できてるっぽいです。現状では4点だけなので結局たったこれっぽっち、みたいな感じもありますが、複雑な画像になればなるほど、また点数が増えてくればくるほど威力を発揮するかと思います。svg以外はベタ塗りに単色テキストが乗ってるだけの500x500pxのサンプル画像だったので、それでも全体で3割削減出来ているのはいい感じだと思います。 出典がわからなくなってしまった2回目のimageminでも30バイトとはいえ全くの無意味ではないようなので、しばらくこれで運用しつつ細かいオプションの使い方も折を見て調べて見ようと思います。

What you see is what we wanted to see.