今回は、「picture要素とsrcset属性を使って画像を切り替えて表示する方法」について紹介します。

簡単に出来るので、是非参考にしてください。

なぜpicture要素とsrcset属性を使って画像を切り替えて表示する方が良いのか？

picture要素とsrcset属性を使わなくても、クラスに「display: none;」を指定することで、画像を切り替えることも出来ます。

しかし「display: none;」の場合は、非表示の画像も無駄に読み込んでしまうため、WEBサイトの表示速度が遅くなる原因になります。

その点、picture要素とsrcset属性は表示しない画像を無駄に読み込む必要がなくなり、WEBサイトのアクセスビリティ的にも良くなりますよ。

【HTML】picture要素とsrcset属性を使って画像を切り替えて表示する方法

完成形はこちらです。

ブラウザ幅を小さくすると、画像が切り替わることが分かるでしょう。

そして、コードはこちら。

<picture>
  <source media="(max-width: 768px)" srcset="./image/2.jpg">
  <img src="./image/1.jpg" alt="">
</picture>

pictureタグを用意し、その中にsourceタグとimgタグを入れます。

ブラウザ幅が768px以上の時はimgタグの画像を表示し、768px以下になればsourceで指定した画像を表示します。

sourceタグをいくつも並べることで、今以上に細かくレスポンシブで画像を表示させることも出来ます。

まとめ

以上が、「picture要素とsrcset属性を使って画像を切り替えて表示する方法」でした。