imgタグの属性して存在する、srcsetとsizeisについて、改めて整理しておきましょう。
srcsetは画像の幅を明示的に伝える役割
例えば以下のようなsrcsetがあった場合に、300w、900w、1440w、1800w、2880wが明示的に伝えている部分。wは幅でpxが単位になります。つまり「300px、900px、1440px、1800px、2880pxの画像をこちらでは用意しましたよ！」、とブラウザに伝えているということです。
srcset="https://picsum.photos/300/300 300w, https://picsum.photos/900/900 900w, https://picsum.photos/1440/1440 1440w, https://picsum.photos/1800/1800 1800w, https://picsum.photos/1700/1700 2880w"ちなみに実際の画像サイズは関係ありません。https://picsum.photos/1700/1700 2880wのように実際は1700pxの幅の画像を使っているが、明示的に記載した2880wの方を正しい情報として取得するようになっている模様です。
これでブラウザの幅に応じて、画像を読み込む際に最適な画像を選定してもらえるようになります。レティーナディスプレイの考慮も入るので、1440pxのウインドウ幅の場合は、1440pxではなく倍の2880pxの画像が読み込まれる。画像がぼやけずに表示するための必要な最小サイズの画像を選定するようなイメージで考えてもらうといいかもしれません。
sizesはどの画像を読み込むかのルールを決める
sizes="100vw"おそらくデフォルトはsizes="100vw"があたっているように思われます。これはこのvwはCSSのvwと同じ意味合いで捉えていただければと思いますが、画面幅いっぱいを表現しています。
「画面幅いっぱに画像を表示することを前提に画像を選んでください」と伝えているようなイメージです。
もし画面の半分くらいでしか画像を表示しない前提であれば、sizes="50vw"にしておくと、半分の画像サイズを選定してくれるようになります。
条件を追加する
メディアクエリのような条件を追加することが可能です。例えば、以下のような指定です。
sizes="(min-width: 558px) 558px, 100vw"こうすることで、558px以上のブラウザサイズの場合は最大558pxを担保できる画像であればOKという指定にあります。100vwだけだと、どこまでも大きな画像サイズが読み込まれる可能性がありますが（例えば、1400pxの際に2800pxの画像が適応されるなど）、大きな画像を使う想定がなければ、上限の縛りを付けておくと無駄に大きな画像が読み込まれる心配がなく安心できるかと思います。
デザインカンプからのコーディングにおいては、PC時の画像サイズが最大サイズになるはずです。ですので、PCデザインカンプの画像サイズを上限の縛りの基準とするといいかもしれません。
参考記事
