srcsetとsizesでレスポンシブ画像をやる

概要

解説サイトも「わかりやすさ重視」で解説に励んでいて逆にわかりにくかったりもする

以下の3項目を指定しておくことで、clientの環境に応じてブラウザが最適な画像を選択してfetchして表示される

画像ファイルのpath

表示したい画像幅

前提とする知識

考えられるパターンの列挙

srcsetのとりうる選択肢

指定なし

sizesのとりうる選択肢

指定なし

値1つ

mediaqueryを用いて複数指定

table:パターン

srcset\sizes 指定なし 値1つ mediaqueryを用いて複数指定

指定なし ① X X

x ② X X

w ③の特殊版 ③の特殊版 ③

仕様を満たすものとしては3パターンしかないことがわかる

表の通り、最初は「srcsetとsizesはセットで使うもの」という理解から入るほうがわかりやすい気がする

その後で「③の特殊版」見ればいい

ブラウザ視点の画像確定までの手順

① 今のブラウザの幅を見る

③ その条件で確定したsizeを見る

④ srcsetの候補の中から、そのsizeに最も近い画像をfetchして読み込む

用語

code:html

sizes="(<media条件> <size>,..)"

https://gyazo.com/ec7a187794439dc992bf28a8f4d24de1

具体例

code:html

<img srcset="img-1440.png 1440w, img-720.png 720w, img-360.png 360w" src="default-image.png">

デバイスピクセル比が 1 の場合、上のサンプル画像はビューポート幅が360pxまでは img-360.png が、720pxまでは img-720.png が、それ以上のサイズで img-1440.png が表示されます。

デバイスピクセル比が 2 であったなら、360px幅でも img-720.png が、720px幅以上で img-1440.png が読み込まれます。

暗黙のルールが多すぎて辛い

以下のルールを犯していてもエラーが出るわけではなく動かないだけ

srcsetとsizesの組み合わせ

組み合わせ的には9パターンありうるが許容されているのは5パターン

sizesでmediaqueryを指定する場合はwidthは指定してはいけない

srcsetにxとwを混在させてはいけない

srcsetのリストは値がかぶっていてはいけない

srcsetもsizedも不要

debug時のTIPS

PCでブラウザの幅を大きくしたり小さくしたりすれば、変化が見える

しかし、一度ブラウザ幅を大きくして大きいサイズの画像を読み込んだら、

ブラウザ幅小さくしても、大きいサイズの画像が出る

キャッシュが効く

一度、大きいのが読み込まれたら幅を小さくしても大きい画像が出る

適当に5段階くらいに分けてsrcsetを指定する感じになるのね

こんな感じのmacroやらcomponentやらを作っておいて、imgタグの代わりに使えばいい

code:html

<img

src="{{url}}?w=960"

srcset="{{url}}?w=80 80w,

{{url}}?w=160 160w,

{{url}}?w=320 320w,

{{url}}?w=640 640w,

{{url}}?w=960 960w,

{{url}}?w=1280 1280w"

sizes="{{ sizes|join(' ') }}"

...

/>

<img

src="{{url}}?w={{size}}"

srcset="{{url}}?w={{size}} 1x,

{{url}}?w={{size*2}} 2x,

{{url}}?w={{size*3}} 3x"

...

/>

諸々の解説記事

MDNの解説

訳がおかしかったり、知らん単語が出てきたりはするが、説明の順序としてはわかりやすい気がする

上の表のように「srcsetとsizesはセットで使う」から話をすすめる

簡潔でいい

理解してたら理解できる

整理されているので、理解した後に辞書的に参照するのに良さそう

いがいとよかった

実験

説明の順序が逆でわかりにくい気がする

特殊版の説明からしている

わかりやすい人からしたらわかりやすいのかもしれない

特殊版を説明した後に、汎用版を説明する、というのを繰り返している

間違ってはないけどわかりにくい

説明の順序が悪い気がする

わかってたらわかる