imgixをIESHILに導入してみた感想

こんにちは、不動産情報サイトのIESHILでエンジニアをしている須貝です。1年半ぶりくらい2回目の登場です。前回はCircleCIでbundle updateする話をしたのですが、あれはもうdependabotに置き換えました。自前で作るより遥かに高機能で良いです。
そこにも少し関連する話で、IESHILの開発では「ビジネスのコアの部分に関係しないものはできるだけ自分で作らない」ことを大切にしています。例えばWebアプリケーションのインフラはHerokuですし。少人数でプロダクト開発に集中するには合理的な判断だと考えています。で、今回はその一環としてimgixを導入した話をしたいと思います。

imgixって何？

まず「imgixって何？」という方に非常に簡単にご説明しますと、リアルタイムに画像を処理してくれてさらにCDNもセットになっているSaaSです。「いみじっくす」と読むそうです。

@chriscoyier Yes, it's pronounced "im•ij•iks" :)
— imgix (@imgix) 2015年8月25日

もう少し調べたらimgixのPress Kitにも読み方についての情報がありました。やはり「image + icks」だそうです。日本語っぽく読むなら「いめーじっくす」なんでしょうか。imgixが公開しているビデオを見ると「いみじっくす」と言っているように聞こえるので私は「いみじっくす」で行こうと思います。

なお、国内では日経新聞さん、一休.comさんといったところでの導入事例があるようです。

特徴は主に下記のような感じです。

画像のURLにクエリパラメータを指定することでリサイズ、変換などが簡単にできる。APIの種類も豊富なので、かなり色々なことができます。詳細はAPIリファレンスをご覧ください。
WebP対応が簡単です。上記のパラメータに関連する話なのですが、auto=formatをつけるとWebPに対応しているブラウザにはWebPで画像を返します。Lighthouseの警告が減ってうれしいです。
バックエンドにS3を指定できるので、すでにS3を利用していれば導入が非常に簡単。Google Cloud Storageにも対応しています。
料金体系は実際にアクセスがあった枚数ベースでの請求がメインで、それプラス転送量となっています。ですので毎月使った分だけ支払う形です。ここは後ほどもう少し詳しく説明します。

つらつらと挙げましたが、ひとことで言うととにかくいろいろ簡単にできます。これに尽きます。

導入時にやったこと

IESHILには下記のようにマンションの画像が載っておりまして、以前はこれらの画像はAWSのEC2上に構築した画像リサイズサーバーから配信をしていました。

構成としてはS3に画像の元データがあり、リクエストがあった場合にリアルタイムに元データをリサイズをして配信していました。なお、当時はCDNを利用しておらず…。ですのでパフォーマンスの観点からも良くない状況が続いていました。
このEC2上で行っていた画像変換処理をimgixに置き換えました。特に技術的に難しいことはなく、行ったことは

これまで使用していたS3のバケットをそのままimgixに設定
Webアプリケーション側で画像を参照している箇所を少し修正した

くらいです。本当に拍子抜けするくらい簡単でした。

その結果

Before

imgix導入前。TTFBで300〜400ms程度。

After

imgix導入後。TTFBで15ms 🚀 こちらはCDN経由なのでBeforeとそもそも比較にならないくらい速いです。

imgixのダッシュボードで確認してみたところ、IESHILの場合はCDN経由とそうでないものを合わせた平均レスポンスタイムは140〜160msのようです。

導入してみた感想

以下、実際に導入してみた感想です。

良かった点

繰り返しになりますが、導入が非常に簡単です。
クエリパラメータでの画像変換が多彩で強力です。ちなみにimgixにはSANDBOXというツールがありまして、ここでパラメータを変更しながらリアルタイムに画像の変化を試すことができます。いろいろとパラメータを試していたら半日くらい溶かしました。

気になる点

唯一懸念点を挙げるなら料金体系でしょうか。imgixの料金はアクセスがあった画像のユニーク数（Master images）1000枚あたり$3 + 転送量が1GBあたり¢8となっています。コストの大半を占めるのがMaster imagesに対する課金です。ですのでプロダクトによってはコストパフォーマンスがあまり良くない可能性があります。ちなみにMaster imagesの数は月ごとにリセットされます。

Herokuを知っている方からは「なんでCloudinaryじゃないんだ？」などといったツッコミがあるかもしれませんが、Herokuのアドオンは従量課金ではないので……。というわけで私はimgixを導入して良かったと思います。このエントリーが画像配信周りでSaaSを検討している方の一助となれば幸いです。