クックパッド開発者ブログスマートフォン用の表示で見るクックパッド開発者ブログ2015-03-04アプリで利用する画像についてユーザーファースト室のhidaka(@kaa)です。クックパッドアプリ内では元々同じレシピの画像を画面、環境によって様々なサイズで表示しています。レシピの検索結果でのサムネイルや、レシピ詳細画面、写真の拡大表示時などなど。その際、端末の解像度にあわせ無駄のないよう、表示領域にあわせて画像をリクエストしていました。http://www.slideshare.net/mirakui/ss-8150494これでそれぞれの端末にあわせた画像を配信していましたが、今年あたりからさらに最適化が必要になってきました。端末のスペックが上がることにより、1インチあたりのピクセル数が増加しました。LGL24など)ですと534dpiなど。縦×横のピクセル面積になると(534/326)*(534/326)≒2.68倍。画像のファイルサイズはほぼ画像面積に比例するので通信量も2.68倍になります。5と同じ液晶の物理面積だった場合です。実際は高解像度端末は6インチなど液晶サイズも広いため、端末の画面幅にあわせた同じトリミングの写真だと5倍近いサイズの画像をリクエストすることもあります。携帯側のメモリや電池消費、速度が低下します。パケット使い放題からデータ量限定定額に一気にパケット使い放題からデータ制限ありの時代になりましたね。去年起こった一番のモバイル環境の変化ではないでしょうか。使いすぎると速度制限というサービスが多いので、海外でよくあるプリペイドSIMのオーバーすると通信できなくなるものに比べるといくらかマシですが通信量は少ない方がいい。サーバーコストの問題だけでなく、ユーザー的にもLTEの回線が速いからいい、という問題ではなくなりました。回線速度は速かった日本国内ですが、MVNOにより遅い回線のユーザーが現れました。MVNOの多くはドコモの回線を使っているため、回線品質が安定しているのに速度は遅い、というLTEの普及した国内では珍しいタイプ。このためにもデータ量の軽量化が求められます。MVMOについては変化が激しく、初期の常に低速というものから数Gまでは速い、といった現在の3キャリアのサービスに近くなっている傾向があります。どの画質で表示するか端末の画面密度には差があり、どれが必要十分によい、という基準は現状ありません。幅1440のandroid機が画質いいのは当たり前です。大きな画像を使えば使うだけきれいだし、オリジナルの写真の画質にも左右されます。5の画質を採用することにしました。(国内向けの場合です。グローバルチームではまた別の設定にすると思います)PCのwebサイトですとADSL、光回線では通信量=サーバーコストとなりますが、モバイルでは通信量=サーバーコスト=表示待ち時間=ユーザーの携帯料金とまで繋がっていきます。去年一気に変わったパケット代の仕組みのように、環境の変化は1,2年で起きるので常に実際の利用環境でどう見えるかを追っていく必要があります。速くできないか画質、サイズ最適化したとはいえレシピ詳細画面ではそれなりに大きな画像を使っています。クックパッドアプリに限らず、携帯のメモリ増加に伴い大きな画像を使ってみせていく画面構成は増えています。レシピ詳細はアプリで一番大きな画像を使い、PVも多い画面ですので出来る限り最適化を行ないます。レシピ詳細画面への遷移元は、かなりの割合で検索結果だったり、レシピの一覧画面からです。一覧画面ではサムネイル(もちろんこれも最適化します)、レシピ名、付属テキスト情報などを表示しています。このデータを画面間で使いまわしてみましょうbeforeafterロード総時間、通信量は変わっていませんが、体感はかなり速くなりました。遷移した瞬間にファーストビューがほぼ描画されるので、真っ白のまま待つ時間を軽減できます。通信量、待ち時間は絶対的な数値ですが体感的な待ち時間にはこのような改善策もあります。5の画面密度で取得するとするとサイズは750px*563px。ファイルサイズは240kbから140kbに、4割ほど削減できました。実際のアプリでの表示はこうなります。縮小した画像の場合また、webp対応を行うとさらに3割ほど削減できるので、元々のサイズから6割程度の通信量削減となります。試したレシピはこちら。12:41アプリで利用する画像についてTweet関連記事2019-10-21クックパッドアプリ(Android)の開発効率化のためにやったこと/やっていることモバイル基盤部のこやまカニ大好き(id:nein37)です。技術部の松尾(@Kazu_cocoa)です。Passwordsを利用したAndroidアプリログインフロー改善への...技術部モバイル基盤グループの児山です。使ったセキュリティログ検索基盤の構築サービス特性にあった検索システムの設計戦略クックパッド採用説明会「クックパッドはサービスの作り手を採用したいんです。/*}*/スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。