3方式5種類
状態:調査中
閲覧数:2,280
投稿日:2015-08-17
更新日:2015-08-21
A系.幅に合わせた寸法での表示(Viewport-based Selection)
・A-1.srcset属性、w記述子
・A-2.sizes属性、vw、srcset属性、w記述子
・A-3.sizes属性、min-width属性、vw、srcset属性、w記述子
B系.アートディレクション(Art Direction)
・B.picture要素、source要素、media属性
C系.デジタルピクセル比
・C.、srcset属性、x記述子
色々な記述方式が存在
・分かりにくいので勝手に分類!
見分け方
・w記述子があれば A-1方式
・sizes属性があれば A-2方式
・sizes属性にmin-widthプロパティが付与されていれば A-3方式
・media属性があれば B方式
・ピクセル密度デスクリプタ(1x、1.5x、2x、3x などの x記述子) があれば C方式
勘違いしやすい点
・B方式の「img属性srcset」もしくは「img属性src」は、「sourceタグで指定された条件以外」という意味
・一方、A方式のimg属性srcは、単なるフォールバック。img属性srcsetが有効なブラウザでは全く考慮されない
・A-1.srcset属性、w記述子
・A-2.sizes属性、vw、srcset属性、w記述子
・A-3.sizes属性、min-width属性、vw、srcset属性、w記述子
B系.アートディレクション(Art Direction)
・B.picture要素、source要素、media属性
C系.デジタルピクセル比
・C.、srcset属性、x記述子
勝手に分類
色々な記述方式が存在
・分かりにくいので勝手に分類!
見分け方
・w記述子があれば A-1方式
・sizes属性があれば A-2方式
・sizes属性にmin-widthプロパティが付与されていれば A-3方式
・media属性があれば B方式
・ピクセル密度デスクリプタ(1x、1.5x、2x、3x などの x記述子) があれば C方式
勘違いしやすい点
・B方式の「img属性srcset」もしくは「img属性src」は、「sourceタグで指定された条件以外」という意味
・一方、A方式のimg属性srcは、単なるフォールバック。img属性srcsetが有効なブラウザでは全く考慮されない
A-1.srcset属性、w記述子
A-1方式.srcset属性 w記述子
幅デスクリプタ
幅に合わせた寸法での表示
→ 画面サイズに合わせて画像読込
→ 幅とハードウェアの画面解像度に基づき(Retina対応)、最も適切な画像リソースを選択して読込
・imgタグsrcset属性w記述子
具体例1
ウィンドウサイズ | 読込画像 |
---|---|
320px 未満 | img-320.jpg 読込 |
320px 以上 640px 未満 | img-640.jpg 読込 |
<img src="img/img.jpg"
srcset="img/img-320.jpg 320w,
img/img-640.jpg 640w"
alt="画像の説明">
具体例2
ウィンドウサイズ | 読込画像 |
---|---|
400px 未満 | 400w.png 読込 |
400px 以上 600px 未満 | 600w.png 読込 |
600px 以上 800px 未満 | 800w.png 読込 |
800px 以上 1000px 未満 | 1000w.png 読込 |
1000px 以上 1200px 未満 | 1200w.png 読込 |
それ以外(ウィンドウサイズが 1200px 以上) | 1200w.png 読込 |
<img
src="img/800.w.png"
srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
alt="幅に合わせた寸法での表示の例">
具体例3
・A-2方式だが、100vwのみの指定なので、実質的にA-1方式
・ウィンドウサイズと同じサイズ(100vw)の画像を自動選択
ウィンドウサイズ | 読込画像 |
---|---|
400px 未満 | 400w.png 読込 |
400px 以上 600px 未満 | 600w.png 読込 |
600px 以上 800px 未満 | 800w.png 読込 |
800px 以上 1000px 未満 | 1000w.png 読込 |
1000px 以上 1200px 未満 | 1200w.png 読込 |
それ以外(ウィンドウサイズが 1200px 以上) | 1200w.png 読込 |
<img
sizes="100vw"
src="img/800.w.png"
srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
alt="幅に合わせた寸法での表示の例">
動作確認
・成功
A-2.sizes属性、vw、srcset属性、w記述子
A-2方式.imgタグ(sizes属性 srcset属性w記述子)
幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性
・imgタグsrcset属性w記述子
sizes属性
・条件とそれに応じた画像表示を指定
具体例1
・ウィンドウサイズの半分(50vw)のサイズの画像を自動選択
具体例1
ウィンドウサイズ | 読込画像 |
---|---|
640px 未満 | img-320.jpg 読込 |
1280px 未満かそれ以上 | img-640.jpg 読込 |
<img src="img/img.jpg"
sizes="50vw"
srcset="img/img-320.jpg 320w,
img/img-640.jpg 640w"
alt="画像の説明">
A-3.sizes属性、min-width属性、vw、srcset属性、w記述子
A-3方式.imgタグ(sizes属性min-widthプロパティ srcset属性w記述子)
幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性min-widthプロパティ
・imgタグsrcset属性w記述子
sizes属性
・条件とそれに応じた画像表示を指定
・sizes属性では、メディアクエリが当てはまる最初の条件が適用されるため、複数記述する場合の指定順番はとても重要
具体例1
・ウィンドウサイズが 640px 以下なら ウィンドウサイズの半分(50vw)のサイズの画像を自動選択して読込
・それ以外の時は画面サイズに対して100%の画像を自動選択して読込
ウィンドウサイズ | 読込画像 |
---|---|
640px 未満 | img-320.jpg 読込 |
1280px 未満かそれ以上 | img-640.jpg 読込 |
<img src="img/img.jpg"
sizes="(min-width: 640px) 50vw, 100vw"
srcset="img/img-320.jpg 320w,
img/img-640.jpg 640w"
alt="画像の説明">
B.picture要素、source要素、media属性
B方式.pictureタグ + sourceタグ(media属性 srcset属性) + imgタグ(srcset属性)
画像のアートディレクション
アートディレクションによる選択
→ 表示される画面に応じて画像を出し分け
→ ウィンドウサイズに合わせて画像を切り替え
・pictureタグ
・sourceタグmedia属性、sourceタグsrcset属性
・imgタグsrcset属性、もしくは、imgタグsrc属性
具体例1
・ウィンドウサイズが 1200px 以上なら 1200w.png 読込
・ウィンドウサイズが 1000px 以上なら 1000w.png 読込
・ウィンドウサイズが 800px 以上なら 800w.png 読込
・ウィンドウサイズが 600px 以上なら 600w.png 読込
・ウィンドウサイズが 400px 以上なら 400w.png 読込
・ウィンドウサイズが 200px 以上なら 200w.png 読込
・上記以外(ウィンドウサイズが 200px 未満)なら img srcset で指定した内容(800w.png) 読込
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="./img/1200w.png" media="(min-width: 1200px)">
<source srcset="./img/1000w.png" media="(min-width: 1000px)">
<source srcset="./img/800w.png" media="(min-width: 800px)">
<source srcset="./img/600w.png" media="(min-width: 600px)">
<source srcset="./img/400w.png" media="(min-width: 400px)">
<source srcset="./img/200w.png" media="(min-width: 200px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="./img/800w.png" alt="CSSデモ">
</picture>
動作確認
・成功
C方式.srcset属性 x記述子
ピクセル密度デスクリプタ(1x、1.5x、2x、3x など)を使用
Retina対応
→ 高解像度のディスプレイをサポート
→ Retinaディスプレイ用に画像を切り替え
・「imgタグsrcset属性 x記述子」 もしくは 「sourceタグsrcset属性 x記述子」
上記に「pictureタグ × sourceタグ」が加わる場合もあり
・つまり「srcset属性 x記述子」がある場合は、常にC方式
※「B方式」でかつ「C方式」なケースもあり得ると言うこと!
動作確認
・Retinaディスプレイを保持していないため未検証