imgタグのsrcset属性
from <img>
レスポンシブ画像をHTMLのみで実現するために使う
imgタグのsizes属性と組み合わせる話は、srcsetとsizesでレスポンシブ画像をやるを参照
Web Browserに対して、実際に使える画像の候補を伝えるために記述する
以下の2パターンがある
組
(画像のpath, x) の文字列リストe.g.
srcset="img/img1x.jpg 1x, img/img2x.jpg 2x" imgタグのsizes属性は指定しない
組
(画像のpath, w) の文字列リストe.g.
srcset="img/img320.jpg 320w, img/img640.jpg 640w" imgタグのsizes属性は指定する(しなくてもいい)
w と x の指定は混在させてはいけないdefautlは
1x 何も書いていない場合
記述が間違っている場合
w と x を組み合わせて記述したなど単位
Device Pixel Ratio記述子
x 1x が通常ディスプレイ 2x や 3x が高解像度ディスプレイ幅記述子
w 画像の実際の幅
ここにDevice Pixel Ratioみたいな概念は存在しない
表示の話をしていないので。
用語として適当かはわからないがdevice pixelのことである
画像を右クリックして「情報」を見たときの横幅
x で指定する場合の例考えることが少ない
html<img
src="img/example-img.jpg"
srcset="img.jpg 1x,
img@2x.jpg 2x"
alt="..."
>通常ディスプレイでは、
img.jpg を表示、Retinaでは img@2x.jpg を表示するこの
img.jpg は、 img@2.jpg の何倍やねん、という話が出てくるが、この記述の話自体には関係ない
レスポンシブ画像の話
w で指定する場合の例 srcset="img/img320.jpg 320w, img/img640.jpg 640w" その画像の実際の幅を指定する
なぜ人間が指定しないといけないかと言うと、ブラウザはこの値を見て、どの画像をfetchするかを確定するから
まだfetchしてきていないので、実際の幅はブラウザは知る由もない
Webブラウザに対して、実際に使える画像の候補を伝えます（サイズ違いの画像、正確にはピクセル密度記述子が異なる画像）。