srcsetとsizesの書き方：画面に合う画像を届けよう

スマホにも大きな画像を送っていないかな？表示幅のヒントと画像候補を、HTMLで分けて指定するよ。

図：ブラウザは画面密度なども考慮して画像を選ぶ。ヒントと実際の表示幅を揃える。

候補をsrcset、表示幅をsizesへ

同じ構図の画像を複数の幅で用意したら、srcsetに候補と幅を書けるよ。sizesにはレイアウト上の表示幅を伝える。ブラウザは画面密度なども考慮して候補を選ぶため、常に特定のファイルになると決めつけないでね。

2つの画像幅を用意した例

<img src="cover-1200.jpg"
  srcset="cover-600.jpg 600w, cover-1200.jpg 1200w"
  sizes="(max-width: 640px) calc(100vw - 40px), 600px"
  width="1200" height="630" alt="制作デスクの作例">

候補の画像は同じ比率で、それぞれ実際の幅に合う数値を指定してね。この例は狭い画面で左右20pxの余白、広い画面で600px表示を想定しているよ。自分のCSSに合わせて変えよう。

sizesは画像を伸縮するCSSではない

実際の見た目はCSSなどで決まるよ。sizesだけ600pxにしても、レイアウトが全幅表示ならヒントと見た目がずれてしまう。画像の表示幅と指定をセットで確認してね。

確認は通信と見た目の両方で

開発者ツールで読み込まれたファイルを確認し、複数の画面幅でぼやけないか見よう。キャッシュによって選択結果が変わる場合もあるため、通信条件を揃えて比較するのが大切だよ。