Edited at
ViibarDay 6

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

More than 1 year has passed since last update.

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

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

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


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

image_optimizerを使用して画像最適化をしてくれるGem

しかしimage_optimizerの更新がアクティブではないし人気もなさそう。

optipng, jpegoptimとあとpngquantにも対応している模様。

Piet::CarrierWaveExtensionというCarrierWave用のモジュールが用意されている。


画像最適化だけを行うGem

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

ImageOptim.appを参考に開発してるらしい。

開発も活発でなんだかよさそ〜〜〜


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

てか、作ったぞ!

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を使用してない模様!!!