[Middleman 3] middleman-imageoptim で画像を最適化する
公式で一行触れられているだけの画像圧縮について。
利用しようと思ったら、いろいろ追加が必要でした。
ビルド時に画像も圧縮したい場合, middleman-imageoptim を試してみましょう。
% middleman version
Middleman 3.3.6
Contents
インストール
Gemfile
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 からも画像最適化が行えるようになるよう。
必要なバイナリーを 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 し、利用しないように設定を加えます。
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 に最適化された画像が生成されました。