移行中の知識
レスポンシブ画像
Responsive Image
定義
レスポンシブ画像（responsive image）とは、viewportや表示サイズ、device pixel ratioなどの条件に応じて、適切な画像resourceや解像度を選んで表示する考え方です。同じ画像をCSSで縮小することだけではなく、必要以上に大きいresourceを送らないことや、表示条件に合うpixel densityを選ぶことも含みます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
local business website
Hero画像のresourceを画面幅で変える
見るポイント
PC用の大きなhero imageをmobileにもそのまま配らず、実際の表示サイズに合うresource候補を用意し、通信量と描画品質の両方を見る。
product thumbnail
高密度screen向けの画像を用意する
見るポイント
CSS上の表示寸法だけでなくdevice pixel ratioも考え、同じ構図の複数解像度から適切なresourceが選ばれるようにする。
注意
誤解しやすい点
- 大きな画像をCSSで縮小表示すればresponsive image対応だと考える。
- すべてのdeviceへ最大解像度の画像を送れば品質が最も高いと考える。
- resource解像度の選択と、構図自体を変えるart directionを同じ問題として扱う。
関連
関連する概念
出典