srcset でPCとスマートフォンと高解像度の振り分け

Question

画像の表示を、PCとスマートフォンと高解像度の振り分けをするため、以下のような記述で制作していました。こちらと同じような表示をCSSを使わずにsrcsetのみで記述することは可能でしょうか？

<img class="pc" src="pc.jpg" srcset="pc.jpg 1x,[e-mail] 2x" />
<img class="sp" src="sp.jpg" srcset="sp.jpg 1x,[e-mail] 2x" />

.pc { display:block; }
.sp { display:none; }

@media screen and (max-width: 599px) {
.pc { display:none; }
.sp { display:block; }
}

Answer 1

pictureタグでいけるんじゃないでしょうか

<picture>
  <source media="(mix-width: 600px)" srcset="pc.jpg 1x,[e-mail] 2x">
  <img src="https://placehold.jp/150x150.png" srcset="sp.jpg 1x,[e-mail] 2x" alt="">
</picture>

たしかimgにsrcは必須属性で省略できないと思います。

Comments

[momo_monom]

ありがとうございます！pictureタグですね！
やはり srcset のみでは、不可能ですよね。。？

[momo_monom]

現状では、secsetのみでは、不可能なようでした。