Help us understand the problem. What is going on with this article?

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

More than 3 years have 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を使用してない模様!!!

nifuramu
ひかりのかなたに きえさった
http://nifura.mu/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away