モバイルデバイス用の画像の準備

モダン ウェブブラウザー およびコンテンツ管理システムは、任意の設定で表示するように画像を最適化します。 ただし、画像が表示される可能性のあるフォームファクタと場所ごとに最適化された画像を準備することをお勧めします。 画像の解像度、サイズ、色空間の3つに焦点を当てます。

画像の色空間

グラフィックデザイナーは、2つの原色空間に依存しています。 色空間は、原色を組み合わせて複雑な色の虹を形成する方法です。

モバイルデバイス用の画像を準備するときは、RGBモードを使用してください。 コンピューターのモニターやスマートフォンのディスプレイは、赤、青、緑のピクセルの組み合わせに依存しています。 この RGB 画像は、画面上で意図した色を正確に再現するように最適化されています。

印刷の場合、デザイナーは4色のプロセスを使用します。このプロセスでは、すべての色がシアン、マゼンタ、イエロー、ブラックの組み合わせに蒸留されます。 4色画像は「 CMYK このための画像。

画像解像度

特にモバイルプラットフォームの画像は、モバイルネットワークでのダウンロード速度と品質のバランスを取り、モバイルデータの上限とファイルサイズのバランスをとるために、できるだけ小さいサイズにする必要があります。

を含むほとんどのプログラム Adobe Creative Cloud アプリケーションは、解像度と圧縮のさまざまな組み合わせで画像を表示するExport forWebツールをサポートします。 最小の合計サイズで最高品質の画像を選択します。

ピクセル単位の画像サイズ

各画像は、本来の目的に合わせたサイズにする必要があります。 一般的なWeb用途の画像サイズの例を次に示します。

• インターネットバナー広告は、多くの場合468ピクセル×60ピクセルです。
• Facebookのカバー画像は851ピクセル×315ピクセルである必要があります。
• Twitterのプロフィール写真は400ピクセル×400ピクセルである必要があります。
• 共有リンクの画像は1200ピクセル×630ピクセルである必要があります。

特定の目的で写真を扱う場合は、その写真が表示される場所（ソーシャルメディアなど）を確認してください サイトまたはブログ）最適な画像のサイズを確認し、それに応じてサイズを調整して、ストレッチやトリミングを回避します 画像。

ピクセル化を避けるために、実際のディスプレイサイズを目指してください。 画像のサイズが適切であっても、サイズが正しくない場合、利用可能なスペースに合わせて画像を拡大する必要があると、結果の製品がピクセル化されたように見えることがあります。

ベクター画像について

ベクター画像（デバイスによって計算および描画される画像）は、通常、より効率的で高品質です。 ラスター画像（一度に1ピクセルずつ描画される画像）は、画像に影響を与えることなく拡大および縮小できるためです。 品質。 シンプルなロゴ、線画、グラフの場合は、ベクターバージョンが理想的です。 写真にはベクター形式は使用されません。