最近Hugoを使ったブログに移転した。
「はてなブログからHugoに移行。その際に行ったあれこれ。」

せっかくブログを運営するからにはSEOも少しがんばりたい。
PageSpeedで画像を最適化できるよっていわれたので、画像を圧縮させようと思った。
しかし、気がつくと忘れてしまったりするので、
Werckerを使って自動で最適化させることにした。

WerckerでのCI/CD環境

まず、Werckerを使ったCI/CD環境だが、こちらを参考にしてほしい。
「Werckerを使ってHugo+Github PagesのCI/CD環境を整備する」

画像圧縮処理

ブログの中で使う画像は、JPEGとPNGが混じっている。
そのため、両方に対応して画像を圧縮する必要があった。

画像の圧縮ツールはPageSpeedが推奨してきた、
optipngとjpegtranを利用することにした。

• OptiPNG: Advanced PNG Optimizer
• jpegtran

処理自体はいたってシンプル。
次のシェル(optimize_image.sh)を用意した。

#!/bin/sh
find ./static/image/ -name "*.png" | xargs optipng -o5
find ./static/image/ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

Werckerに組み込む

wercker.ymlのbuildの段階で最適化を仕込めばおわり。
ただし、すべての画像ファイルをデプロイのたびに最適化すると時間がかかる。
定期的にローカルで圧縮してgitに更新しておいたほうがいいだろう。
あくまで、忘れてしまった時のためにCIでまかなってくれるというスタンスで利用している。

- script:
  name: optimize image size
  code: |
    sh ./scripts/optimize_image.sh