画像
静的な表示画像を効果的に使った没入感の高いエクスペリエンスもあれば、テキストやアイコンだけを使ったエクスペリエンスもあります。表示する画像のデザインと入手方法は、いくつかあります。
画像の使用方法
コンポーネントを画像の前面に配置する場合は、オーバーレイを使って色付きの不透明なレイヤーを画像の上に適用すると、コンテンツの読みやすさとアクセシビリティが向上します。画像を目立たせないようにする場合、不透明度を変更して効果に変化をつけることもできます。
背景：背景画像を使用すると、主役のコンテンツを邪魔することなく、視覚エクスペリエンスを高めることができます。画面に表示されるメインコンテンツのアクセントとして、レイアウトの背景に画像を配置します。
サムネイル：サムネイルを使うと、検索結果を確認したり、TextコンポーネントとImageコンポーネントを組み合わせたりして、選択肢にコンテキストを追加できます。
アイコン：小さな画像で三次的なコンテンツを提供します。たとえば、評価を表す星などに使います。
エンプティステート：エンプティステートやデフォルトステートのレイアウトに画像を追加すると、レイアウトが整います。エンプティステートに画像を追加すると、単純な応答にも楽しさやコンテキストをプラスできます。
画像の形式
サポートされている画像の形式は次のとおりです。
| 形式 | 拡張子 | 詳細 |
|---|---|---|
| JPEG | .jpeg、.jpg | ベースとプログレッシブがサポートされます |
| PNG | .png | アルファチャンネルがサポートされます |
画像をAlexaに適用するには、6つの主な密度クラスに対応するアセットを用意する必要があります。たとえば、中密度（mdpi）ベースライン画面用の340 x 260ピクセル画像の場合には、 サイズ255x195、340x260（ベースライン）、510x390、680x520、1,020x780、1,360x1,040の同画像を用意する必要があります。
画像サイズ表
| 画像サイズの例 | 倍率 | 分類 | PPI |
|---|---|---|---|
| 255 x 195 px | 0.75x | ldpi | ～120 ppi以下 |
| 340 x 260 px（ベースライン） | 1x | mdpi | ～160 ppi |
| 510 x 390 px | 1.5x | hdpi | ～240 ppi |
| 680 x 520 px | 2x | xhdpi | ～320 ppi |
| 1,020 x 780 px | 3x | xxhdpi | ～480 ppi |
| 1,360 x 1,040 px | 4x | xxxhdpi | ～640 ppi |
サイズ変更
best-fill
（best-fill）を使うと、バウンディングボックスが完全に覆われるように、画像のサイズを均一に拡大または縮小します。
best-fit
（best-fit）を使うと、バウンディングボックス内に画像全体が収まるように、画像のサイズを均一に拡大または縮小します。
none
（none）を使うと、バウンディングボックス内で画像の拡大・縮小が行われません。バウンディングボックスからはみ出た画像は切り捨てられます。
ビューより大きな画像は、ビューに収まるように均一に縮小されます。best-fillとnoneではいずれも、画像の寸法がビューの寸法に一致しない場合に背景色が見えるようにすることができます。