LoginSignup
8
9

More than 5 years have passed since last update.

image_optimを使ってMiddlemanのBuild時に画像を圧縮しよう

Last updated at Posted at 2013-12-16

アドベントカレンダー2013 8日目の記事です。
Middleman Advent Calendar 2013 - Adventar

今北産業

  • homebrewでimage_optimに必要なファイルをいれる
  • gemとconfig.rbの設定
  • buildに結構時間がかかるようになる(!)

homebrewで必要なものをいれる

$ brew install advancecomp gifsicle jhead jpegoptim jpeg optipng pngcrush

これだとpngoutだけ入らないので

画像ファイルをまとめて最適化する - 終わる世界とコンテンツ

$ brew tap adamv/alt && brew install pngout

これをしておこうとしたら、このadamv/altリポジトリがなかった。

ので、無理やり入れてみる

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

$ brew install https://raw.github.com/cbguder/homebrew/53ea33bab5372ea74117ace8c44aa7ea988e93c2/Library/Formula/pngout.rb

これでおk

middleman-imageoptimのインストール

gem "middleman-imageoptim", "~> 0.1.3"
$ bundle install --path vendor/bundle

cofig.rbでの設定

config.rb
configure :build do
  activate :imageoptim
end



activate :imageoptim do |options|
  # print out skipped images
  options.verbose = true

  # Setting these to true or nil will let options determine them (recommended)
  options.nice = true
  options.threads = true

  # Image extensions to attempt to compress
  options.image_extensions = %w(.png .jpg .gif)

  # compressor worker options, individual optimisers can be disabled by passing
  # false instead of a hash
  options.pngcrush_options  = {:chunks => ['alla'], :fix => false, :brute => false}
  #options.pngout_options    = {:copy_chunks => false, :strategy => 0}
  options.optipng_options   = {:level => 6, :interlace => false}
  options.advpng_options    = {:level => 4}
  options.jpegoptim_options = {:strip => ['all'], :max_quality => 100}
  options.jpegtran_options  = {:copy_chunks => false, :progressive => true, :jpegrescan => true}
  options.gifsicle_options  = {:interlace => false}
end

これで middleman buildでimage optim できた!

でも、結構時間がかかる

めちゃくちゃ画像の数が多くなるとけっこう困る遅さ。

10ファイルで2〜3秒くらいかかってる。

8
9
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9