レスポンシブ画像系用語

Media Queries

メディア クエリ
メディアクエリー
・「ページ レイアウトの変更」だけでなく、「ビューポート幅に応じた画像の選択的な読込」や「アート ディレクションの適用」などにも利用可能

Max Width
・ビューエリアの最大幅
・このサイズより小さい場合に適用

Min Width
・ビューエリアの最小幅
・このサイズより大きい場合に適用

仕様
・メディアクエリー

Art Direction

アードディレクション
・レスポンシブ・レイアウトの特定のブレークポイント向けに調整された画像を提供したい場合に使用
→ 特定のデザインブレークポイントで、指定した画像を表示させたい

仕様
・art-direction

---

descriptor

デスクリプタ
・記述子

種類
・w descriptor
・x descriptor

---

w descriptor

ダブル デスクリプタ
・幅デスクリプタ

具体例
・160w

仕様
・viewport-based-selection

---

x descriptor

エックス デスクリプタ
・ピクセル密度デスクリプタ

具体例
・1x、1.5x、2x、3x

仕様
・device-pixel-ratio

picture要素

<picture> に <img> は必須
・<picture> の最後に書かなければいけない

アートディレクションでの利用
・<picture> 要素が最も使われるケース
→ レスポンシブデザインにおける「アートディレクション」

アートディレクションとは？
・ひとつの画像をビューポート幅に応じて拡大縮小するのではなく、ビューポートの大きさに合わせ、予め用意した複数の画像を使用する方式

利点
・<picture> 要素、もしくは srcset 属性と sizes 属性を持つ <img> 要素を使用すると、ブラウザは明示的に指定された条件にマッチする画像のみをダウンロード

ブラウザ対応状況
・IE、Edge 未対応
・ブラウザ対応一覧




新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向

---

<picture>要素のsource

使用すると、メディアクエリーを使って条件指定可能
・ウィンドウサイズに合わせて画像を切り替える

具体例
・ウィンドウサイズが320px以上ならsmall.jpg読込
・ウィンドウサイズが320px以上かつRetinaディスプレイならsmall@2x.jpg読込

<picture>

  <source media="(min-width: 320px)" srcset="small.jpg 1x, small@2x.jpg 2x">

  <source media="(min-width: 640px)" srcset="big.jpg 1x, big@2x.jpg 2x">

  <img src="small.jpg" alt="Example image">

</picture>

imgタグのsrcset属性

HTML5で新しく追加
・記述するimg要素は1つだけで、Media Queries(メディアクエリ)を使用した画像切り替えと同等機能が実現可能

特徴
・対応しているブラウザは必要ない画像をダウンロードしない
・ファイル名のみでxデスクリプタ記述がない場合、そのファイルは 1x が指定されたものとみなされる

導入すると出来るようになること
・Retinaディスプレイ用に画像を切り替え
・ウィンドウサイズに合わせて画像を切り替え

コンマ区切りで画像とその画像が読み込まれる条件を指定
・画像がひとつの場合は、そのファイルのパスを指定（例：srcset="kitten.png"）
・画像を複数指定する場合は、ファイルのパスとピクセル密度デスクリプタの組み合わせを、カンマで区切って指定（例：srcset="kitten.png, kitten@2X.png 2x"）
・ファイル名のみでデスクリプタがない場合、そのファイルは 1x が指定されたものとみなされる

特徴
・src画像は読み込まない

サイズ指定
・widthとheightを指定しなくとも、’2x’というサイズ指定から自動的に1/2に縮小して表示する

x記述子
・srcset属性に、1.5xや2.0xといったx記述子（descriptor）を画像URLとペアにして記述することで、それぞれのピクセル比（device-pixel-ratio）で表示したい画像を指定可能

ブラウザ対応状況
・IE 未対応
・Edge 部分的なサポート
・解像度の切り替え（X記述子を使用して）するための構文のサブセットではなく、（W記述子を使用して）のサイズで使用できる完全な構文をサポートしています。
・ブラウザ対応一覧

imgタグのsrc属性

srcsetに対応していないブラウザへのフォールバック
・未対応ブラウザはここで指定された画像を読込

フォールバックとは？
・ある機能を提供する際に不具合が生じた場合、自動的に代替手段に切り替え、質を落としても機能提供を継続する仕組みのこと

具体例1
・Retinaディスプレイでは test@2x.png を使用、非Retinaディスプレイでは test.png を使用

<img src="test.png" srcset="test.png, test@2x.png 2x">

<img src="test.png" srcset="test.png 1x, test@2x.png 2x">

具体例2
・Retinaディスプレイでは 360-480.jpg を使用、非Retinaディスプレイでは 180-240.jpg  を使用

<img srcset="./images/180-240.jpg, ./images/360-480.jpg 2x" alt="CSSデモ">

<img srcset="./images/180-240.jpg 1x, ./images/360-480.jpg 2x" alt="CSSデモ">

---

Retinaディスプレイ

AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称
・「Retina」とは英語で「網膜」を意味
※Retina相当の解像度を持っているAndroidモデルも存在している

特徴
・画面解像度が高い

---

Retina対応

＝「高解像度ディスプレイ」対応

未対応だと何がマズいの？
・Retinaディスプレイで見た場合、画像がぼやけたように「荒く」見えてしまう

対応
・解像度2倍(サイズが2倍)の画像を用意
・元画像サイズを指定して表示
・例えば300pxで表示する場合、600pxの画像を用意して、HTML上で300pxにサイズを指定して表示すると綺麗な状態で表示される

---

CSS4 image-set

CSS4のimage-setを使用してRetinaディスプレイに対応する方法
・ベンダプレフィックスが必要なプロパティなので注意が必要

---

vw（Viewport Width）

・表示領域の割合を表す数値
・100vwはViewportの100%
・sizes属性は、デフォルトが100vwなので指定不要