pictureタグで画像のレスポンシブに対応させてみる
2024.11.29 09:00
2024.11.29 13:51

レスポンシブサイトを作っていると、
画面幅によって表示する画像を変えたい場合があります。
例えばスマホ用の画像とPC用の画像があって、
画面幅によってどちらかを表示するって感じです。
この場合今までだとcss側でmedia queryで画面幅を判断させて
「display: none」をつかってどちらかを非表示にするということをやっていたわけですが、
これだと表示されない場合でも読み込みだけは行われてしまうので、
表示速度に影響がでます。
ところが「picture」タグを使うとその問題が解消するとのこと!
それは便利ですね!
コードはこんな感じです。
<picture>
<source srcset="image.jpg" media="(min-width: 480px)"/>
<img src="image_sp.jpg">
<picture>
これだと通常は「image_sp.jpg」が表示されて、
600px以上になると「image.jpg」が表示されるようです。
これでスマホなのに無駄に大きいPC用の画像が
読み込まれるのを防ぐことができますね!
他にも画像形式対応にも使うことができるみたいです。
例えば「webp」の画像を用意し、
対応していないブラウザには「jpg」を表示させるって感じです。
<picture>
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="pc.jpg" />
</picture>
こんな感じですね。
対応していれば「image.webp」を表示し、
対応していなければ「image.jpg」を表示します。
便利ですね!
今回は以上です!