SREチームの@cubicdaiyaです。今回はメルカリにおける画像配信とImageFluxを利用した画像の動的なリサイズとWebP変換の導入によってアプリのデータ通信量を大幅に削減した事例について紹介します。
ImageFlux
ImageFluxはクラウド画像変換サービスです。URLに画像変換用のパラメータを組み込むことで画像データの拡大・縮小やオーバレイ、フォーマット変換等が実現できます。
メルカリにおける画像データ
メルカリのアプリ上で発生するデータ通信の大部分はタイムラインや検索結果に表示される画像データが占めています。種類はいろいろありますが例えば、
- 商品画像
- プロフィール画像
- バナー画像
といったものが挙げられます。特に商品画像はデータ量がとにかく多く、毎日百万個単位で増加するほか、タイムラインや検索結果をはじめ、多くの機能で活用されています。
ImageFluxを利用した画像変換でデータの通信量を削減
モバイルアプリが快適に利用できるようにするにはアプリのデータ通信量を抑える工夫が重要になります。そのため、メルカリでは画像データを配信時にImageFluxで動的にリサイズしたり、フォーマットをWebPに変換することでアプリのデータ通信量を削減しています。
何故画像の動的な変換が必要なのか？
一般に画像処理には多くのマシンリソースが必要になります。また、画像データの配信時に変換処理を行うとなるとその処理によって発生するレイテンシも無視できません。それでもWebアプリケーションやモバイルアプリで画像の動的な変換の仕組みを導入するのは大きなメリットがあります。
特に大きいのがアプリのUIやデザインの変更に柔軟に対応できることです。アプリのUIやデザインは時として大きく変化するので、アプリが必要とする最適な画像サイズもまた変化します。しかし、UIやデザイン変更の度に新しいサイズの画像データを用意するのは難しい場合が多く、あまり現実的ではありません。例えば前述にもあるようにメルカリでは画像データの数が多いので複数サイズパターンの画像データを用意するのにはかなりのリソースと時間を要します。
また、1つの画像データから配信先の環境に合わせて複数の画像データを生成して配信することも容易になります。これは画像データを格納するストレージのコストを抑えたり、アップロード処理をシンプルにすることにも繋がります。
2列タイムラインから3列タイムラインへ
以下は過去のメルカリ（左）と現在のメルカリ（右）の起動時の画面です。商品のタイムラインが表示されています。
元々メルカリの商品タイムラインは2列でしたが、2016年から3列タイムラインをA/Bテストしていました。
このA/Bテストは長期間に渡って実施され、最終的に3列タイムラインがデフォルトとして採用されました。
この変更により一度に表示される画像データの数が増えたので、アプリのデータ通信量が増加し、CDNのトラフィックも1.5倍近く増加したため、画像データの通信量削減が急務となりました。
ImageFluxを利用した画像の動的リサイズとWebP変換
タイムラインに表示されている従来の商品画像サムネイルのサイズは元々2列タイムライン向けに設計されたものだったので、データの通信量と画質のバランスを考慮した上で3列タイムライン向けにより小さいサイズにImageFluxでリサイズすることにしました。以下は私のプロフィール画像をImageFluxでリサイズした結果です。元のサイズよりも18%小さくなっています。
さらにWebPに変換することで元の画像サイズよりも約52%小さくなりました。
この他にもいろいろな画像で検証してみた結果、2列タイムライン向けのサムネイルを3列タイムライン向けにリサイズすることで1サムネイルにつき10~20%のサイズ削減、プラスWebPに変換することで40~50%のサイズ削減が見込めることがわかりました。40~50%と言っても上記の画像では約7~8KBの差ですが、メルカリのタイムラインや検索結果では非常に多くの画像が表示されるのでトータルで見るとかなり大きな数字の差となって現れます。
実際、ImageFluxによる画像の動的なリサイズとWebP変換を導入することで画像データの通信量を30%以上削減することができました。
まとめ
メルカリにおける画像配信とImageFluxを利用した画像配信の最適化について紹介しました。モバイルアプリが快適に利用できるようにするにはアプリのデータ通信量を抑える工夫が重要です。メルカリのように画像が多く表示されるようなアプリでは画像の動的な変換の仕組みを導入することでこの問題に対処しやすくなるほか、アプリのUIやデザインの変更にも柔軟に対応できるようになるといったメリットがあります。
