HTMLのpictureタグの使い方を完全ガイド！画像を環境に応じて出し分け

HTML pictureタグの使い方｜source要素で画像を出し分け

先生と生徒の会話形式で理解しよう

生徒

「先生、HTMLで同じページにスマホ用とパソコン用で違う画像を表示させたい時ってどうすればいいんですか？」

先生

「それならpictureタグとsourceタグを使うと簡単にできます。表示する画面のサイズや解像度に応じて自動で画像を切り替えてくれるんです。」

生徒

「sourceタグって何ですか？」

先生

「sourceタグはpictureタグの中で使い、条件に応じてどの画像を表示するか指定するためのタグです。スマホ用、タブレット用、パソコン用などを切り替えられます。」

1. pictureタグとは？

pictureタグは、HTMLで複数の画像を用意して、画面サイズや解像度に合わせて最適な画像を自動で表示できるタグです。従来はimgタグだけで画像を表示していましたが、スマホとパソコンで同じ画像を使うと表示が崩れることがあります。pictureタグを使うと、状況に応じた最適な画像を出し分けることができます。

2. sourceタグの基本的な使い方

pictureタグの中に入れるsourceタグでは、画像の切り替え条件を指定します。主に使う属性はmediaとsrcsetです。mediaは表示する条件を、srcsetは表示する画像のパスを指定します。


<picture>
    <source media="(max-width: 600px)" srcset="/img/sample120-120.jpg">
    <source media="(min-width: 601px)" srcset="/img/sample150-100.jpg">
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
</picture>

ブラウザ表示

3. imgタグとの違い

imgタグは単純に1つの画像を表示するだけですが、pictureタグを使うと条件に応じて画像を切り替えられます。たとえば、スマホで小さい画像を表示してページの読み込み速度を速くしたり、パソコンでは高画質の画像を表示したりすることが可能です。


<img src="/img/sample150-100.jpg" alt="サンプル画像">

ブラウザ表示

4. 複数条件での画像切り替え

pictureタグでは、sourceタグを複数使うことで、画面幅ごとに異なる画像を表示することができます。条件は上から順番に評価され、最初に一致したものが表示されます。


<picture>
    <source media="(max-width: 400px)" srcset="/img/sample120-120.jpg">
    <source media="(max-width: 800px)" srcset="/img/sample150-100.png">
    <source media="(min-width: 801px)" srcset="/img/sample150-100.jpg">
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
</picture>

ブラウザ表示

5. 解像度に応じた画像切り替え

sourceタグでは、srcsetに複数の画像を指定して解像度ごとに切り替えることも可能です。高解像度ディスプレイでは高画質の画像、標準解像度では軽量の画像を表示することで、ユーザー体験を向上させます。


<picture>
    <source srcset="/img/sample150-100.jpg 1x, /img/sample150-100.png 2x">
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
</picture>

ブラウザ表示

6. alt属性でアクセシビリティ対応

imgタグと同じように、pictureタグでも最後に置くimgタグにalt属性を必ず付けましょう。これは視覚障害のある人が画面読み上げソフトで画像の内容を理解できるようにするためです。SEO対策としても重要なポイントです。


<picture>
    <source media="(max-width: 600px)" srcset="/img/sample120-120.jpg">
    <img src="/img/sample150-100.jpg" alt="説明用のサンプル画像">
</picture>

ブラウザ表示

7. まとめとしてのポイント

pictureタグを使うと、スマホやパソコン、タブレットなど様々な画面サイズや解像度に合わせて最適な画像を表示できます。sourceタグで条件を指定して、最後にimgタグでデフォルトの画像とalt属性を設定するのが基本です。これによりページの表示速度やユーザー体験が向上し、SEOにも有利になります。


<picture>
    <source media="(max-width: 600px)" srcset="/img/sample120-120.jpg">
    <source media="(min-width: 601px)" srcset="/img/sample150-100.jpg">
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
</picture>

ブラウザ表示

まとめ

ここまで学んだ内容を振り返ると、HTMLのpictureタグは、現代のウェブデザインで非常に重要な役割を持つことがわかります。従来のタグでは、1つの画像しか表示できず、スマホやタブレット、パソコンなど異なる画面サイズや解像度に対応することが難しかったのに対し、pictureタグを使うことで表示環境に応じた最適な画像を自動で切り替えることが可能になります。また、sourceタグを用いてmedia属性やsrcset属性を設定することで、画面幅や解像度ごとに画像を柔軟に出し分けることができる点が大きなメリットです。

特に、複数のsourceタグを組み合わせる方法やsrcsetに複数の解像度画像を指定する方法を理解しておくと、スマホでは軽量の画像を表示し、パソコンや高解像度ディスプレイでは高画質の画像を表示するなど、ユーザー体験を向上させる工夫ができます。さらに、imgタグにalt属性を設定することで、視覚障害のあるユーザーに配慮したアクセシビリティ対応もでき、検索エンジンにとってもページ内容を正しく認識させることが可能です。

このようにpictureタグとsourceタグ、そしてimgタグを組み合わせて適切に使うことで、レスポンシブ画像の実装やアクセシビリティ対応、ページ表示速度の最適化など、現代のウェブ制作で求められる基本的なポイントを押さえることができます。実際のコーディングでも、下記のようにシンプルにまとめて使うことができます。

 <picture> <source media="(max-width: 600px)" srcset="/img/sample120-120.jpg"> <source media="(min-width: 601px)" srcset="/img/sample150-100.jpg"> <img src="/img/sample150-100.jpg" alt="サンプル画像"> </picture>

ブラウザ表示

このコード例では、画面幅600ピクセル以下では小さい画像を、601ピクセル以上では大きい画像を表示する設定になっています。さらに、高解像度ディスプレイに対応する場合はsrcsetに2倍サイズの画像を指定することも可能です。これにより、どのデバイスでも最適な画像をユーザーに提供でき、ページの読み込み速度を維持しながら美しい表示を実現できます。

また、SEOの観点でもalt属性を適切に記述することで、検索エンジンが画像の内容を理解しやすくなり、検索結果での評価向上にもつながります。つまり、pictureタグを正しく使いこなすことは、ユーザー体験向上と検索エンジンからの評価の両方に寄与する重要なポイントです。

先生と生徒の振り返り会話

生徒

「先生、pictureタグを使うと具体的にどんなメリットがあるんですか？」

先生

「メリットは大きく分けて三つあります。一つ目は、スマホやタブレット、パソコンなどの画面サイズに応じて最適な画像を自動で表示できることです。二つ目は、高解像度ディスプレイ対応でユーザー体験を向上できること。三つ目は、alt属性を正しく設定することでアクセシビリティにも配慮できることです。」

生徒

「なるほど。sourceタグを複数使うのはどうしてですか？」

先生

「sourceタグを複数使うと、画面幅ごとに異なる画像を条件に応じて切り替えられます。上から順に評価され、最初に条件が一致した画像が表示されるので、効率よく最適な画像を出し分けることができます。」

生徒

「imgタグにaltをつけるのは必須ですか？」p>