もうずっと便利に使っていますが、度々書き方を忘れて調べに行くことがあるので備忘録です。
画面サイズによってPC向け、スマホ向け等画像を切替えたい場合に、HTML5.1 で追加された＜picture＞タグが便利です。
<picture>
<source media="(max-width: 767px)" srcset="img_sp.jpg"/>
<img src="img_pc.jpg" alt="画像です">
</picture>
上記のように記述することで、
・画面サイズ767px以下では img_sp.jpg を表示
・それ以上では img_pc.jpg を表示
となります。
(max-width: 767px) の部分は min-width: ○○px とすることで、○○px以上でこの画像を表示、とすることもできます。
html は少しごちゃつくものの、以下のような利点があるのでとても便利です。
・htmlのみで実装できる
・条件に当てはまった画像のみ読み込まれる
ちなみにIE11以下が非対応なのですが、icturefill.js を読み込むことでJSで対応させることができます。
