imgタグのsizesとsrcsetの関係

imgタグの解釈

imgタグの表示は以下のフローで考えると覚えやすいです。

1. ブラウザが img タグを読み込む
2. src属性を探す
   1. src がない → Bad end !
3. srcset属性を探す
   1. srcset がない → Normal end（src の画像を使う）
   2. srcset がある → 記述子を確認
      1. srcset がピクセル密度記述子（x2など）の場合
         1. デバイス情報に基づき画像を決定 → Good end ①
      2. srcset が幅記述子（400wなど）の場合 → sizes 属性を探す
         1. sizes がない → Bad end !（srcset の幅記述子には sizes が必要）
         2. sizes がある → 画像表示幅を算出し srcset から画像を決定 → Good end ②

※幅記述子は単に画像の幅をブラウザへ伝えるだけで表示に関しては何も指定していない点に注目。 

サンプルコード

Good end ①

<img
    src="earth_m.jpg"
    srcset="earth_m.jpg, earth_l.jpg 2x"
    alt="">

※srcset例 ピクセル密度記述子：2x、幅記述子：400w
※ピクセル密度記述子は省略可能(1xになる)（カンマを含むURL注意）
※ピクセル密度記述子(2x)と幅記述子(400w)は混在不可
※幅記述子をつける場合は省略不可

Good end ②

<!-- 30em以下：1カラム、50em：2カラム、それ以上：3カラムになる -->
<img
    sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 60px)"
    srcset="s.jpg 400w, m.jpg 800w, l.jpg 1600w"
    src="s.jpg" alt="">

※vw は view port に対する割合(％)
※sizes を指定したら必ずsrcset＋幅記述子をつける
（sizesで指定した幅に合う画像を選択するため）
※sizes の最後の条件無し指定はdefault値

おまけ

<!-- view port の100％幅で表示 -->
<img sizes="100vw" src="s.jpg" srcset="s.jpg 450w, m.jpg 900w" alt="">

<!-- サイズ毎に異なる画像を表示する場合はpictureを使う -->
<picture>
    <source media="(min-width:768px)" srcset="earth.jpg, universe.jpg 2x">
    <source media="(min-width:320px)" srcset="city.jpg">
    <img src="city.jpg" alt="">
</picture>

※picture 内の source のルール
    ・media または type が必須
    ・srcset が必須
    ・source の後に img が必要
※video/audio 内の source の場合
    ・source要素に src が必須
    （video/audio要素自体の src は指定できなくなる）