HTML CSS - 2020-02-22

pictureタグを使ってPCとスマホでの画像切り替える方法

<picture>
  <source srcset="/sample_sp.jpg" media="(max-width:767.9px)">
  <img src="/sample_pc.jpg" alt="">
</picture>

<picture>
  <source srcset="/sample_sp.jpg" media="(max-width:767.9px)">
  <img src="/sample_pc.jpg" alt="">
</picture>

HTML

WebPを使う場合

<picture>
  <source srcset="/sample_sp.webp" media="(max-width:767.9px)" type="image/webp">
  <source srcset="/sample_sp.jpg" media="(max-width:767.9px)">
  <source srcset="/sample_pc.webp" type="image/webp">
  <img src="/sample_pc.jpg" alt="">
</picture>

<picture>
  <source srcset="/sample_sp.webp" media="(max-width:767.9px)" type="image/webp">
  <source srcset="/sample_sp.jpg" media="(max-width:767.9px)">
  <source srcset="/sample_pc.webp" type="image/webp">
  <img src="/sample_pc.jpg" alt="">
</picture>