HTML

画面サイズに合わせて画像を切り替える！picture要素の使い方

 

デバイス（スマホ、タブレット、PC）のサイズに応じて画像を変える方法をご紹介します。

画像の切り替えは、htmlのpicture要素とsource要素を使うことで簡単に実現できます。

本記事では、鳥の成長（卵→ヒナ→鳥→丸焼き）を例に説明していきます。

実際の使用例

PCで表示している方は、ブラウザの幅を変えてみてください。

画像が自動的に切り替わることがわかると思います。

 

<picture>要素とは？

  • 概要:
    <picture>要素は、複数の画像リソースをもとに、条件に応じて最適な画像を選択するHTMLのタグ。
    <source>タグと組み合わせることで、画面サイズやデバイスの種類に基づいて異なる画像を表示できる。
  • 特徴:
    • メディアクエリを使った画像切り替えが可能
    • デフォルト画像を指定できる
    • アクセシビリティ対応（alt属性を活用）

 

<source>要素の役割

  • 概要:
    <source>要素は、<picture>の中で条件付きで表示する画像を指定するタグ。
  • 主な属性:
    • srcset: 表示する画像のパスを指定
    • media: CSSのメディアクエリと同じ形式で条件を指定
  • 注意点:
    • <source>タグに直接alt属性を追加することはできない
    • 条件に該当しない場合や未対応のブラウザでは<img>タグが使用される

 

サンプルコード

<picture>
    <!-- 画面サイズが992px以上であればこの画像を表示 -->
    <source srcset="../assets/images/image-992.jpg" media="(min-width: 992px)">
    <!-- 画面サイズが768px以上であればこの画像を表示 -->
    <source srcset="../assets/images/image-768.jpg" media="(min-width: 768px)">
    <!-- 画面サイズが576px以上であればこの画像を表示 -->
    <source srcset="../assets/images/image-576.jpg" media="(min-width: 576px)">
    <!-- どれにも該当しない場合やブラウザが<source>をサポートしていない場合、この画像を表示 -->
    <img src="../assets/images/image.jpg" alt="イベント画像">
</picture>

 

<picture>要素のメリットと注意点

  • メリット:
    1. デバイスごとに最適な画像を表示できるため、パフォーマンスが向上
    2. 画像サイズの調整が簡単
    3. レスポンシブデザインに最適
  • 注意点:
    • すべてのブラウザで対応しているわけではない（特に古いブラウザ）
    • 必要以上に多くの画像を用意しすぎると管理が煩雑になる

 

よくある質問（FAQ）

  • Q1. <picture>と<img>の違いは？
    • <img>は単一の画像を表示するが、<picture>は条件に応じて画像を切り替えるための要素。
  • Q2. <source>タグの条件が重なった場合はどうなる？
    • 上から順に評価され、最初に一致した条件が適用される
  • Q3. <picture>要素を使わないとどうなる？
    • デバイスに最適な画像が提供されず、表示速度や品質が低下する可能性がある

 

まとめ

  • <picture>要素と<source>要素を使うことで、柔軟かつ効率的に画像を管理できます。
  • 例を参考に、自分のプロジェクトでもレスポンシブな画像切り替えを試してみましょう！
関連記事