img要素のsrcsetは画像候補と密度または幅descriptorを対応させる

srcsetは、同じ内容を持つ複数の画像URLをimg要素へ示し、user agentが表示条件に合う候補を選べるようにする属性です。各URLには、1xや2xのpixel density descriptor、または480wや960wのwidth descriptorを対応させます。

一つのsrcsetで密度と幅を混ぜません。表示寸法がほぼ固定ならx、layoutによって画像の表示幅が変わるならwとsizesを使います。

x descriptorは同じ表示寸法の密度違いを示す

同じlogoを同じCSS寸法で表示し、画素密度に応じて画像を選ばせる例です。

<img
    src="logo-240.png"
    srcset="logo-240.png 1x, logo-480.png 2x"
    width="240"
    height="80"
    alt="サトラボ">

1xと2xは、画像のCSS上の幅を表しません。候補のpixel densityを表します。この例では、二つのfileが同じlogoを表し、logo-480.pngはlogo-240.pngの縦横2倍の画素を持つという前提です。

descriptorのない候補は1x相当です。同じlistへdescriptorなしと明示的な1xを重複して置きません。高密度用というfile名だけで選択されるわけではないため、URLとdescriptorを必ず対にします。

w descriptorは画像fileの固有幅を示す

画像の表示幅がviewportやlayoutで変わる場合は、候補fileの固有幅をwで示します。

<img
    src="work-480.jpg"
    srcset="work-480.jpg 480w, work-960.jpg 960w, work-1440.jpg 1440w"
    sizes="(max-width: 600px) 100vw, 720px"
    alt="机の上に置いた制作資料">

480wは、このfileの固有幅が480 pixelsであるという情報です。「viewportが480 pixels以下なら使う」という条件ではありません。sizesは、media conditionごとに画像がCSS上でどの程度の幅になるかをuser agentへ示します。

width descriptorを一つ使うなら、同じsrcsetのほかの候補もwidth descriptorへそろえます。記載した幅は、画像fileの実際の固有幅と一致させます。file名だけを変更して、descriptorの数値を以前のままにしないでください。

xとwは画像を用意する目的が違う

srcsetはbrowserへ候補を渡す仕組みであり、特定の一枚を必ず取得させる命令ではありません。user agentは画面のpixel density、zoom、network conditionなども考慮して候補を選べます。

選択を確かめるときは、画面幅を変えた見た目だけで判断せず、browserの通信記録で取得した画像URLを確認します。cacheが残っていると別の候補を取得しない場合があるため、同じ条件でcacheの有無もそろえます。

srcとaltはsrcsetを付けても残す

srcsetを解釈しないuser agentのために、srcへ基本となる画像を置きます。width descriptorを使うuser agentではresource selectionの扱いが変わりますが、srcはfallbackとして必要です。

altも画像候補ごとに変わる属性ではありません。すべての候補が同じ意味を伝えるなら、一つのaltで代替内容を示します。画面幅によって被写体やcropまで変える場合は、単なる解像度違いではありません。まず、同じ内容の画像候補だけでsrcsetを構成します。

browserの対応範囲は実装ごとに確認します。srcsetが使えるという前提だけで元のsrcを消さず、対象とするbrowserで、通常密度、高密度、狭い画面、広い画面を試してください。

最初の一手は、画像一枚について表示寸法が固定か可変かを決めることです。固定なら1xと2x、可変なら固有幅を確認したw候補とsizesを用意し、通信記録で選ばれたfileを確認します。