[Middleman 3] middleman-imageoptim で画像を最適化する

公式で一行触れられているだけの画像圧縮について。
利用しようと思ったら、いろいろ追加が必要でした。

ビルド時に画像も圧縮したい場合, middleman-imageoptim を試してみましょう。

% middleman version
Middleman 3.3.6

Contents

インストール

Gemfile

plasticine/middleman-imageoptim

Gemfile に追加します。

Gemfile
gem 'middleman', '~> 3.3.6'
# Images compress plugin
gem 'middleman-imageoptim', '~> 0.1.4'

Bundle インストールします。

% bundle install --path vendor/bundle

image_optim

middleman-imageoptim は、image_optim という gem を利用しています。
これをインストールすると shell や ruby からも画像最適化が行えるようになるよう。

toy/image_optim

必要なバイナリーを homebrew でインストールします。

% brew install advancecomp gifsicle jhead jpegoptim jpeg optipng pngcrush pngquant

pngout に関しては後述します。

config.rb

config.rb の build あたりに activate :imageoptim を追加します。
但し、その状態では pngout がないと言われ、処理が止まってしまいます。

/Users/****/projects/middleman-h5bp/vendor/bundle/ruby/2.1.0/gems/image_optim-0.9.1/lib/image_optim.rb:187:in `resolve_bin!': `pngout` not found (ImageOptim::BinNotFoundError)

option で false し、利用しないように設定を加えます。

ImageOptim::BinNotFoundError when pngout is not installed. · Issue #1 · plasticine/middleman-imageoptim

config.rb
# Build-specific configuration
configure :build do
  activate :imageoptim do |options|
    options.pngout_options = false
  end

つかいかた

上記の設定を利用すると、middleman build でコンパイル時に画像の最適化が行われます。

% bundle exec middleman build

/source の画像ファイルはオリジナルが残り、/build に最適化された画像が生成されました。

補遺