imgタグのsrcset属性

レスポンシブ画像をHTMLのみで実現するために使う

Web Browserに対して、実際に使える画像の候補を伝えるために記述する

以下の2パターンがある

組(画像のpath, x)の文字列リスト

e.g. srcset="img/img1x.jpg 1x, img/img2x.jpg 2x"

組(画像のpath, w)の文字列リスト

e.g. srcset="img/img320.jpg 320w, img/img640.jpg 640w"

imgタグのsizes属性は指定する(しなくてもいい)

wとxの指定は混在させてはいけない

defautlは1x

何も書いていない場合

記述が間違っている場合

wとxを組み合わせて記述したなど

単位

1xが通常ディスプレイ

2xや3xが高解像度ディスプレイ

幅記述子w

画像の実際の幅

ここにDevice Pixel Ratioみたいな概念は存在しない

表示の話をしていないので。mrsekut.icon

用語として適当かはわからないがdevice pixelのことである

画像を右クリックして「情報」を見たときの横幅

xで指定する場合の例

考えることが少ないmrsekut.icon

code: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ブラウザに対して、実際に使える画像の候補を伝えます（サイズ違いの画像、正確にはピクセル密度記述子が異なる画像）。