WEBTODESIGN

適切に画像を切り替える「picture」タグ

自分が使うときにコピペしやすいようにまとめたpictureタグについてのまとめです。

pictureタグでできること

  • メディアクエリ（画面幅）で画像を切り替える
  • 適切な画像形式を読み込ませる（主にwebpの使用時）

条件に合う１つの画像だけを読み込むので、パフォーマンスの向上に役立ちます。

基本形式

通常のimgタグをpictureタグで囲み、条件（属性）を追加したsourceタグを追加していきます。

<picture>
    <source srcset="" 属性>
    <img src="" alt="">
</picture>
  • 上にあるものから順番に読み込まれていき、条件（属性）に合うものが表示されます。
  • クラスやidをつけたい場合は一番下のimgタグにつければOKです。

画面幅で切り替え

メディアクエリで画面幅に応じて画像の切り替えができます。

<picture>
    <source srcset="" media="(max-width: 800px)">
    <img src="" alt="" width="" height="" loading="lazy">
</picture>

min-width、max-widthどちらもいけます。

形式の切り替え

主にwebp形式の画像を使用する際に使います。

webpが対応しているブラウザはwebpで表示し、非対応ブラウザでは通常形式の画像を表示する場合。

<picture>
    <source srcset="" type="image/webp">
    <img src="" alt="" width="" height="" loading="lazy">
</picture>

画面幅＆形式を両方切り替え

両方を組み合わせた場合は以下のようになります。

<picture>
    <source srcset="" type="image/webp" media="(max-width: 800px)">
    <source srcset="" media="(max-width: 800px)">
    <source srcset="" type="image/webp">
    <img src="" alt="" width="" height="" loading="lazy">
</picture>

メインビジュアルの画像などでよく使います。

pictureタグはよく使うのですが、あやふやに覚えちゃってるので、メモしておきました。

RECOMMENDATION

NEWEST