カテゴリー:
画像
閲覧数:1056 配信日:2015-08-06 20:14
A-1方式.srcset属性 w記述子
幅デスクリプタ
幅に合わせた寸法での表示
→ 画面サイズに合わせて画像読込
→ 幅とハードウェアの画面解像度に基づき(Retina対応)、最も適切な画像リソースを選択して読込
・imgタグsrcset属性w記述子
具体例1
| ウィンドウサイズ | 読込画像 |
|---|---|
| 320px 未満 | img-320.jpg 読込 |
| 320px 以上 640ｐｘ 未満 | 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="幅に合わせた寸法での表示の例">
動作確認
・成功