WEBページを少しでも軽く
pictureタグの使い方

寒くなったこの頃、少しでも軽いWebサイトが見たい。
ということで、本日はHTML5のpictureタグについて、画面幅で画像を切り替える方法をお話しします。

pictureタグの使い方

pictureタグは複数のsourceタグと、1つのimgタグを囲んで使用します。
では例を見てみましょう。

1. <picture>
2.   <source srcset="画面幅が751px以上の時の画像パス" media="(min-width: 751px)"/>
3.   <source srcset="画面幅が750px以下の時の画像パス" media="(max-width: 750px)"/>
4.   <img sec="IE用の画像パス" />
5. <picture>

上記の場合、上のsourceタグは画面幅が751px以上の時、下のsourceタグは画面幅が750px以下の時に表示されます。
なお、IEについては非対応となっているので、IE用にimgタグを設定します。
たったこれだけです。
簡単ですね。

また、pictureタグの仕様として、sourceタグを上から順番に読み、条件に合うものを表示するようになっています。
そして、どれも条件に当てはまらなかった場合にimgタグを読むようになっているので、どれだけsourceタグを増やしても無駄に画像が読まれることがなくなります。
以下の様にclassでPCとSPの画像を出し分ける場合、表示としてはどちらかしかされませんが、実はブラウザとしては両方の画像を読み込んでいます。
無駄ですね。

1. <img src="PC用の画像パス" alt="" class="pc_only">
2. <img src="SP用の画像パス" alt="" class="sp_only">

それに比べ、pictureタグを使用すれば必要な画像しか読まれませんので、多少でもページの読み込み速度が軽くなるとうわけです。
もはや今後はpictureタグ一択といっても過言ではないでしょう。

実は上記以外にもpictureタグの使い方はあるのですが、今回はここまで。
また別の機会にご紹介します。
アディオス！