picture要素で出し分ける際のwidthとheightの指定

レイアウトシフト対策として画像にwidthとheightを設定することがありますが、picture要素を使ってPCとSPでサイズの異なる画像を出し分ける場合の設定方法について調べたことをメモ。

サンプルコード

例として、img_pc.jpg(width:800px height:450px)とimg_sp.jpg(width:450px height:800px)という画像を用意して、出し分けを試してみます。
まずはimg要素に対してのみ設定する場合です。

<picture>
  <source
    media="(min-width: 768px)"
    srcset="../img_pc.jpg"
  >
  <img
    src="../img_sp.jpg"
    width="450"
    height="800"
    alt=""
  >
</picture>

この場合、PC画像の表示時にもSP画像のサイズ設定が適用されてしまいます。
img要素にのみサイズ指定を行うデモページ

この対応方法ですが、source要素に対してwidth属性とheight属性の設定ができるようです。(親がpicture要素の場合のみ)
source要素にも設定を追加してみます。

<picture>
  <source
    media="(min-width: 768px)"
    srcset="../img_pc.jpg"
    width="800"
    height="450"
  >
  <img
    src="../img_sp.jpg"
    width="450"
    height="800"
    alt=""
  >
</picture>

これでPC画像の場合もSP画像の場合も意図したサイズ指定にすることができました。
source要素にもサイズ指定を行うデモページ