【picture要素】PCとSPで画像を切り替える方法

こんにちは。今日はPCとSPで画像の切り替えができる、picture要素について書きます。
すでに使っている方も多いと思います＾＾

ちなみに、picture要素を使う以外の方法として、画像の表示をメディアクエリでdisplay:none;を使って切り替えたりもします。

上記の2つの方法でどちらもメリット、デメリットがありますがひとまずpicture要素について使い方を解説しますー！

雛形
MDNの解説
私が実際使っている書き方の例
対応ブラウザ

雛形

        <picture>
          <source srcset="ファルパス" media="(max-width:ブレイクポイントの数値)">
          <img src="ファルパス" alt="">
        </picture>

「ファイルパス」と書いている箇所はHTMLファイルから画像フォルダまでのパスが入ります。

※書き方はこの限りではないです（特にブレイクポイントあたり）

MDNの解説

ここで、picture要素はどういう働きをするのかMDNの解説をのせますねー！

HTML の <picture> 要素は、0個以上の <source> 要素と一つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

ブラウザーは複数の <source> 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <picture> 要素に対応してない場合、 <img> 要素の src 属性で指定された URL が選択されます。選択された画像は <img> 要素が占有する領域に表示されます。

つまり、この条件下の時はこの画像、それ以外はこの画像といったように選択してくれるということです＾＾

では、私が実際に使っている例を載せます！

私が実際使っている書き方の例

        <picture class="photo">
          <source srcset="assets/images/top/cont_img01-sp.jpg" media="(max-width:768px)">
          <img src="assets/images/top/cont_img01.jpg" alt="">
        </picture>

ちなみに、これは一番簡潔な書き方として教えてもらったものです。少し説明しますね。

2列目は【media=”(max-width:768px)”】と記述しているので、
ディスプレイ幅768px以下はsource属性に指定した画像が表示される
→スマホ用の画像

ディスプレイ幅769px以上はimgタグに記述した画像が表示される
→タブレット・PC用の画像