WEBTODESIGN

pictureタグでWebPとjpg、PCとSPで画像を分岐する

WebP対応ブラウザはWebPを表示しつつ、さらにPCとスマホで読み込む画像を変えるpictureタグの書き方をメモ。

pictureタグとは

pictureタグは複数の画像リソースから、状況に合う画像のみを表示してくれます。

displayでオンオフするよりもpictureタグでそもそもの読み込みを最適化した方が、１枚分のデータしか読み込まないためユーザーに優しいです。

サンプルコード

<picture>
    <source media="(max-width: 800px)" srcset="SP用.webp" type="image/webp">
    <source media="(min-width: 801px)" srcset="PC用.webp" type="image/webp">
    <source media="(max-width: 800px)" srcset="SP用.jpg" type="image/jpg">
    <img src="PC用.jpg" alt="画像の説明">
</picture>

画面サイズが800px以下の時は「SP用.webp」を、801px以上の時は「PC用.webp」、WebPに対応していないブラウザではjpgが読み込まれます。

RECOMMENDATION

NEWEST