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

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

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

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

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

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

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

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

完成形はこちらです。

 

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

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

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

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

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

まとめ

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

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事