iPhoneやAndroidアプリにおける画像アップロードと画像表示速度の最適化

3G回線での画像のアップロードと表示速度を最適化するための、アプリ側とサーバー側のテストや手順と注意事項をまとめてみました。今回は極力最大サイズの画像をサーバー側にアップロードし、表示するそれぞれの場所に最適化して表示速度を上げるためという立て付けになっています。

前提として、Facebookのタイムラインのようなリスト表示ページが先にあって、その後に拡大された画像の詳細ページがあるという構成で考えています。

画像アップロード処理の最適化

• まず最初に3G回線でアップロードした場合にどれくらいの時間がかかるのかテストする

  • 画像サイズや容量を数パターンテストして時間を計測する
  • リサイズ処理をした場合の時間も計測する

• 最優先にするのは極力大きな画像サイズをサーバーに送るということ

  • リサイズのための複雑な処理は逆にアップロード速度が遅くなるのでNG
  • リサイズするとCPUを食うので極力リサイズしないやり方を優先する
  • 画像をビットマップに戻してリサイズ&圧縮するやり方はメモリを大量に食うのでNG
    • 2分の1や4分の1などにする時にはそれをしなくて良いので早い

• アップロード時間が10秒（仮）を超える画像サイズの場合にリサイズ処理を検討する * テストで10秒以上かかった画像サイズ（容量）で制限をかけてリサイズ * JPGがほとんどなため2分の1 or 4分の1にするくらいの簡単な処理にする

• アップロードのスピードを上げる

  • システム的にスピードを上げる
    • テスト結果に基づきリサイズ処理を入れるか検討
  • 体感的なスピードを上げる
    • FacebookのBackground処理のようにアプリを止めないやり方など

画像を表示する速度の最適化

• タイムラインのようなページがある場合

  • タイムラインに表示する画像はサーバー側でリサイズした画像にして表示速度を上げる
  • タイムラインのサムネイル画像はどんどん先読みする

• 画像の詳細ページを開いた時の画像表示

  • 表示した瞬間は最初にタイムラインに表示しているサムネイル画像を引き伸ばして表示
    • 画像が荒くても良いので表示速度を優先する
  • サムネイル画像を表示している間にBackgroundで綺麗な画像を読み込む
    • 最初はぼやけた画像だけど徐々に綺麗な画像を表示する
  • 綺麗な画像の読み込みが完了したら綺麗な画像を表示する
    • Facebookなどの表示を参照

• 但しAndroidはメモリのコントールを頑張る

  • リスト表示の一番小さなサムネイル画像はどんどん先読みする
  • メモリが厳しい場合はスクロールする度にどんどん捨てていく
  • 詳細ページの大きなサイズの画像を読み込んだらリスト表示のサムネイルは捨てる

画像処理最適化のためのサーバーサイド

• 画像の詳細ページに複数の画像がある場合はAPIで一度にすべての画像を返す

• 一番大きなスマホの画面サイズにリサイズした画像をタイムライン用にAPIで返す

• 写真をマルチスレッドで保存できるようにするために、投稿を画像なしで保存できるようにする