レスポンシブ画像は、レスポンシブ Web アプリケーションの中でも重要な部分の一つです。Web サイト全体が複数のデバイスでの表示に適応できるようにするため、使用するディスプレイデバイスの特性に関係なく、画像を最適に表示させる必要があります。標準のデスクトップで適切に表示されている画像が、Retina ディスプレイでは粗い画像に見える場合があります。
ただし、高画質の画像はピクセル密度が高いディスプレイ (Apple の Retina デバイスなど) にのみ使用してください。高密度をサポートしないディスプレイでは、ページをロードする際に発生する追加の負荷を回避する必要があります。ディスプレイの密度とは関係なく、すべてのデバイスで高画質の画像をレンダリングさせると、帯域幅や処理能力が制限されているスマートフォンやその他のモバイルデバイスで問題になる可能性があります。
そのため、通常は、デバイスのデバイスピクセル比 (CSS のピクセルあたりのデバイスのピクセル数で測定) に基づいて個別の画像を表示する必要があります。その目的は、すべてのデバイスで "同じ" 画像を表示し、高解像度をサポートするデバイスでは高解像度の画像を表示することです。
これは、さまざまな画像リソースと、ユーザーエージェントが表示に最適な画像ソースを決定する際に役立つ "ヒント" を作成することを目的としています。
Image オブジェクトを作成し、そのオブジェクトに関連する画像ごとに [ Density ] プロパティを指定します。
実行時に、有効ないずれかの方法 ([ Link ] プロパティ、FromImage メソッド、FromURL メソッド) を使用して画像が参照される場合は、srcset HTML5 タグが使用されます。
srcset 項目属性を使用すると、ピクセル密度に合わせて異なる画像を指定できます。次に例を示します。
<img src="Resources/DensityTest.png" srcset="Resources/DensityTest-1x.png 1x,Resources/DensityTest-2x.png 2x,Resources/DensityTest-3x.png 3x,Resources/DensityTest-4x.png 4x" id="IMAGE1" alt=" " class="Image" data-gx-image="">
1x は CSS ピクセルあたりのデバイスピクセル数が 1 であり、2x は CSS ピクセルあたりのデバイスピクセル数が 2 (高ピクセル密度のディスプレイの場合) であることを意味します。
src 項目属性は、srcset 項目属性をサポートしないブラウザー用のフォールバック画像を指定します。
そのため、アプリケーションが実行されると、デバイスの解像度に合った最適な画像が提供されます。
各ブラウザーのサポート状況については、こちらを参照してください。
ナレッジベースの画像でのみサポートされています。「How to manage DB images by density in web applications」を参照してください。
A pixel-identity-crisis
|