モバイルファースト室の @slightairです。 クックパッドの iOS/Android アプリは、少し前のバージョンからWebP形式の画像をサーバから取得して表示するようにしています。 この記事では、なぜ画像形式をWebPに切り替えたのか、また切り替える上で注意した点などを説明します。
Cookpad アプリと画像
クックパッドのアプリはユーザさんに投稿していただいたレシピを表示するアプリケーションです。その性質上、レシピ画像や調理手順、検索画面のサムネイルなどたくさんの画像をサーバから取得して表示する必要があります。
画像の数が増えたりサイズが大きくなればなるほど通信量が増えます。最近はスマートフォンの画面サイズがどんどん大きくなっているので、それに合わせて取得する画像を大きくしていくとさらにファイルサイズが増え、通信量も増えていってしまいます。
サーバとやりとりするデータが多くなると、画像が表示されるまでユーザは待たされることになってしまいます。 少しでもデータを小さくしたい…。
WebP
WebP とは Google が開発している画像形式のひとつです。 https://developers.google.com/speed/webp/
WebPはウェブサイトの通信量軽減と表示速度の短縮のために開発されました。 JPEGやGIF、PNGを置き換えることができます。 可逆圧縮モード、非可逆圧縮モード、アルファチャンネルなどをサポートしています。 可逆圧縮モードのWebPはPNGと比べて26%小さくなり、非可逆圧縮モードではJPEGと比べて25-34%小さくなるとしています。
クックパッドのアプリで表示しているレシピ画像などは、写真であるためJPEG形式の画像を表示していました。
この画面を大きく占める、今日のおすすめのレシピの画像をWebP形式に変換してファイルサイズを比べてみましょう。
この画像です。
レシピはこちらです。
以下の様なコマンドを用いて変換しました。cwebp はGoogleが提供している変換ツールです。
cwebp -q 90 717981.jpg -o 717981_90.webp
以下のような結果になりました。
| file name | file size(Bytes) | |
|---|---|---|
| 717981.jpg | 90,602 | 100.00% |
| 717981_50.webp | 18,344 | 20.25% |
| 717981_60.webp | 20,882 | 23.05% |
| 717981_70.webp | 23,550 | 25.99% |
| 717981_80.webp | 30,214 | 33.35% |
| 717981_90.webp | 51,288 | 56.61% |
指定するqualityの値にもよりますが、かなりファイルサイズが削減できていますね。 見た目が変わらずこれだけファイルサイズが削減できるのであればとても期待できますね。
WebP形式の欠点には対応アプリケーションが少なく、JPEGやPNG形式と比べて扱いにくいというものがあります。 Facebookではこのような事例があったみたいです。
グーグルの画像形式「WebP」を試行するFacebook--ユーザーからは不満の声も - http://japan.cnet.com/news/commentary/35031278/
しかし、モバイルアプリケーションの場合はPCブラウザと違い表示するだけなので、ユーザさんがブラウザの右クリックメニューからWebPの画像を保存するようなことはできないはずです。 保存したレシピ画像が見られない開けないといったトラブルもなさそうなので、気軽に採用できそうです。
WebP形式の画像をアプリで表示する
WebP形式の画像を表示するにはどうしたらよいのでしょう？
Android の場合は、4.0 以上であれば標準で対応しているとのことです。 http://developer.android.com/guide/appendix/media-formats.html
しかし、クックパッドアプリでは 4.2 や 4.3 の環境で画像の表示が崩れるなどの問題が起きたため、4.4 以上の端末のみを対象にWebPサポートを有効にしています。
iOS の場合は、libwebp を組み込む必要があります。 クックパッドアプリの場合は画像の読み込み・表示に SDWebImageというライブラリを使っていました。このライブラリではオプションでWebPサポートを有効にすることができるので、これを導入することで既存のコードをほとんど変えることなくWebPを表示することができるようになりました。
注意した点
WebPを採用する上で、画質が本当に落ちないか、WebPにしたことで一部の画像が表示されないなどの問題が起きないかを特に気をつけていました。
料理の画像を表示するアプリケーションなので、画質が劣化することで料理がおいしくなさそうになってしまうととても残念です。そこでWebPとJPEGの画像を並べて表示し、極端な劣化が起きていないか検証するアプリケーションを作りました。社内でレシピ画像の見た目に変化がないか検証してからWebPを導入しています。
またWebPにしたことで低スペックな端末でレンダリングに時間がかかるようになってないかなども検証しました。通信量が減ってダウンロード時間が減ったとしてもそれの表示処理に時間がかかってしまっては意味がありません。ただ、これについては問題になりませんでした。
社内で検証して、これはいけそうだという話になっても、すぐにすべてを置き換えるようなことはしませんでした。検証したものの予期せぬ影響が見つかってしまった、そういう場合でもモバイルアプリはすぐに更新ができません。 そこで、WebP形式の画像配信を一部のユーザに対して行い、少しずつ対象をふやすような工夫をしていきました。幸い問題がおきなかったので、Androidはバージョン 4.3.1 から、iOSはバージョン 6.4.0 からすべてのユーザーを対象にするようになっています。
おわりに
サーバから取得した画像を多く表示するようなアプリの場合、画像のダウンロードにかかる通信量は無視できません。 WebPは画質をほとんど落とすことなくファイルサイズを減らすことができるので、ダウンロード待ち時間を減らしてユーザ体験を向上させる効果が期待できます。 サービス提供側にも通信量が減らせるメリットがあります。
少しずつでも重ねていけばこのような改善はアプリの性能向上に効いてくると思うので、色々試していきたいですね。