railsの画像最適化でpietを使う
前回の記事でレスポンシブの画像は多少妥協しても大きめのものを使うしかまともな解決方法がないという話をしました。
ところで、弊社の運営しているミライエはリフォームの施工を解説しているのですが、写真が多いものだと20~30枚くらい1記事にあります。 これのそれぞれが一眼レフで撮った場合は元のサイズで5MBとかあるのですが、横幅が700pxになるように圧縮するとだいたい150KBくらいになります。
ただ、150KBも20枚あると3MBで、1ページに3MBもあると通信環境が悪いと画像の読み込みが遅くなります。
どうしたものかなと考えていたのですが、画像の最適化でよく使うこちらのサイトでは品質をあまり劣化させずにサイズが60%くらい削れるので、やはり画像の圧縮・最適化をちゃんとやろうと考えました。
画像のデータ形式ごとに圧縮は異なる
単純に言えばイラストやアイコンはpngのほうがよく、写真はjpgのほうがデータ形式として良いです。
で、これらは見た目には同じでもデータ形式が異なるので圧縮ロジックも違います。jpgの圧縮ユーティリティがpngで使えるわけではありません。
また、仮にコマンドラインで圧縮ユーティリティがあっても普段使っているcarrierwaveから楽に呼び出せないとコードの保守性が悪くなるので、そのあたりにいいgemがないか探しました。
piet
Pietはoptipng, jpegoptimという比較的有名な画像圧縮ユーティリティのrubyインターフェースです。またcarrierwave用のモジュールも提供しているので、carrierwaveからjpegoptimを呼び出したいときは使ったほうがいいでしょう。メンテナがちゃんとついてること、ソースが非常にシンプルなのでいざとなったとき自分で保守できることも魅力です。
piet-binary
この手の話でよくあるのがバイナリ依存のためデプロイで本番サーバに入って手動でコマンドラインをインストールのが面倒という話です。このあたりの解決策がcapistranoだったりdockerだと思いますが、pietは非常に嬉しい事に依存バイナリをgemとして提供してくれています。それがpiet-binaryです。
railsでPDFを生成するときにwkhtmltopdfというライブラリがありますが、それも同様にwkhtmltopdf-binaryという依存バイナリをgemで提供してくれています。
gemで提供されていることでデプロイ設定をいじったり、本番サーバに入って行くこともないので保守性も良くなります。
実際に使ってみた
実際にpietを使って画像を圧縮してみました。
100% (167KB)
50% (76KB)
30% (58KB)
10% (35KB)
700pxいっぱいで表示すると30%あたりもかなりキツイですが、実際は300,400px程度の幅で100%表示されていることが多いので30%か50%で十分でした。
