API - iOSとAndroid用の画像サイズ（さまざまな画面サイズ） - 最適化

Question

さまざまなサイズの画像をグリッド、リスト（Instagramのような）、画面全体を占める画像を表示するアプリケーションで作業する。

Ex。 - あなたはグリッドビュー画像（それほど大きくない）を持っているかもしれませんが、同じ画像も画面全体のサイズとほぼ同じ別の画面に表示されます。これは、これの爆破されたバージョンのようなものです。これらの画像のサムネイルも小さくなっています。

バックエンドチームと協力して最適なソリューションを作り出します。

質問：

1. 異なる画面サイズ用の画像を処理するための最適な方法は何ですか？私はinstagramが高解像度の低解像度とサムネイルのURLを送信することを知っています。

2. イメージごとに複数のサイズが必要ですか？例。グリッドビュー（1x、2x、3xが必要ですか？）または1つのサイズですべての電話画面サイズに対応でき、コードでスケールモードを設定できますか？画面サイズが小さい場合でもこれはいいですか？彼らは画像が必要なので、これは小さな携帯電話サイズのための貧しい経験だろうか？私にとっては、SEのような小型の携帯電話はiPhone 8 plusと同じ処理能力を持たないため、これは最適ではありません。

3. 私たちがiPhoneとAndroidを提供するために同じAPIを使用している場合、処理する画像サイズがより多いので、このAPIはどのようにAndroid用に活用できますか？

ガイダンスをいただければ幸いです。

Answer 1

前提：

あなたは、Webサーバからの画像について話しています。 svgsではなく、インターフェイス のグラフィックスではありません。この分野の公式文書はありません。ちょうど の仮定と結果です。私は私を共有しています。

インターフェイスグラフィックスの場合は、AppleとGoogleの公式ドキュメントがあります。あなたがsvgsを意味するならば、それらは自動的に拡大縮小されます。回答を希望された場合は、トピックを編集するか、新しいトピックを開きます。

解決策は、画像サイズのみではなく、JPGの品質を変更することです。

小さなサムネイル（アバター、写真アイコン）は200×200画像まで使用できます。これは、すべてのデバイスサイズ、解像度、モデルで重すぎることなくOKです。

大きなプレビュー/フルイメージを開く場合は、同じサイズ（元のサイズまたは定義する最大サイズ）を維持できますが、イメージの2つのバージョンを使用します。素早く読み込まれ、バイトの消費量が少なく、画像のコンテンツが表示されます）、元の品質（読み込みとバイトが必要ですが、要求によってのみ表示されます）が表示されます。

小さなサムネイル（〜200ピクセル）の適切な値を選択するには、親指のサイズを大きくします。あなたが最小の解像度で96x96のアバターバブルを持っている場合は、3（96 * 3 = 288）を掛けてサイズを増やしてください！ 最小の解像度の画面では96x96の画像しか必要としないことは事実ですが、数字が小さいことを考えると、その違いは関係ありません（また、写真についてはベクトル画像ではなく、あなたはデバイスにスケーリングを残し、結果は同じです）。彼らは、JPEGファイル、PNG画像、またはWebPsを使用して、適切なフォーマットを選択するためのいくつかの例とガイドラインを示すこと言うhttps://developer.android.com/topic/performance/network-xfer.html ：

私は画像フォーマットに関するいくつかのことを説明し、ダウンロードサイズを小さくする方法をGoogleからのいくつかのドキュメントを、見つけました

Answer 2

リソース（ベクターベースの画像）を使用することができます。これにより、解像度ごとにリソースを生成する必要はなく、1つのリソースが必要になります。リアルタイムでは、svgイメージはデバイスの解像度に拡大されます。

文書によると、あなたはここに得るために多くを持っています。同じファイルが損失することなくさまざまな画面密度 のためにサイズを変更できるので、ベクトルドロワブルの代わりにビットマップを使用して

はあなたのAPK のサイズを小さくします

私はこれをAndroidで使用しており、Androidで問題を解決しています。

私はこれをiOSで使用していませんが、同様のsolutionのように見えます。

Answer 3

すべての質問にはほぼ同じ目標があります。したがって、基本的に50px 100px 200px 400px 800pxや1600pxなどの画像を6バージョン保存してください。

6 GoogleはAndroidのようにほぼすべての画面サイズをカバーできるため、6で十分です。その結果として得られる画像に戻っ幅と高さを与えるLDPI MDPI hdpi xhdpi xxhdpiとxxxhdpi

パラメータとしてAPIにあなたの画面サイズを送信、画像の要求に対してAPIを使用しています。例：800x600の画面では400pxのバージョンを返送します。

そうしないと、パフォーマンスが悪いクライアントサイズや、IOSの自動レイアウトに悪い方法でサイズを変更する必要があります。

Answer 4

Cloudnyのようなサードパーティの画像管理ソリューションを使用できます。

https://cloudinary.com/

Cloudinaryは、デバイスのすべてのタイプに配信することができ、異なるアスペクト比の画像を生成します。