GoogleがCarrierWaveでアップロードした画像を最適化しろというのでGemを作ったった

Viibar社員ではない何かですがViibarアドベントカレンダーに参加している @nifuramu です。よろよろ〜〜

PageSpeed Insightsを使ってwebページの計測をしていたら、画像の最適化をした方がイイよ！って言われたので最適化をしたいと思い、ちょろっと適当に調べました。

今回は個人的にCarrierWaveを利用しているのでCarrierWaveでいい感じに画像最適化してくれる方法を探します。

CarrierWaveで画像最適化をしてくれるGemたち

• carrierwave-imageoptimizer

image_optimizerを使用して画像最適化をしてくれるGem
しかしimage_optimizerの更新がアクティブではないし人気もなさそう。

• piet

optipng, jpegoptimとあとpngquantにも対応している模様。
Piet::CarrierWaveExtensionというCarrierWave用のモジュールが用意されている。

画像最適化だけを行うGem

• image_optim

下記の画像最適化に対応したGem

• advpng from AdvanceCOMP (will use zopfli on default/maximum level 4)
• gifsicle
• jhead
• jpegoptim
• jpeg-recompress
• jpegtran from Independent JPEG Group's JPEG library
• optipng
• pngcrush
• pngout
• pngquant
• svgo

ImageOptim.appを参考に開発してるらしい。
開発も活発でなんだかよさそ〜〜〜

よし！image_optimを使ってCarrerWaveのプラグインを作るぞ！！１

てか、作ったぞ！
https://github.com/nifuramu/carrierwave-imageoptim

インストール方法〜〜〜

必要なコマンドのインストール

まずはimage_optimで画像最適化をするには色々とコマンドを入れないといけないのでインストールします。

今回はgifsicleとjpegoptimとoptipngを入れます。

brew install gifsicle jpegoptim optipng

上記以外のコマンドも対応したい場合はimage_optimのREADMEを読んでインストールしましょう。
https://github.com/toy/image_optim/blob/master/README.markdown#binaries-installation

CarrierWave::ImageOptimのインストール

Gemfileに以下を追加して

gem 'carrierwave-imageoptim'

bundleを実行！

$ bundle install

またはgemコマンドでインストール〜

$ gem install carrierwave-image_optim

使い方〜〜〜

まずはモジュールをincludeします

class MyUploader < CarrierWave::Uploader::Base
  include CarrierWave::ImageOptim

  ...
end

すべてのアップロード画像にjpegoptim, optipng, gissicleを適用したい場合

class MyUploader < CarrierWave::Uploader::Base
  include CarrierWave::ImageOptim

  ...

  process optimize: [{
    jpegoptim: true,
    optipng: true,
    gifsicle: true
  }]
end

特定のversionにのみjpegoptim適用したい場合

class MyUploader < CarrierWave::Uploader::Base
  include CarrierWave::ImageOptim

  ...

  version :thumbnail do
    process optimize: [{
      jpegoptim: true
    }]
  end
end

TODO

• エラーハンドリングしてない
• テスト適当

以上でございます！

なお、ViibarではCarrierWaveを使用してない模様！！！