【HTML Living Standard】picture要素の使い方
picture要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
pictureオブジェクトは、異なるデバイスや画面解像度、または指定された条件に基づいて、最適な画像を表示するためのHTML要素を表すオブジェクトです。これは、ウェブサイトの画像を、その表示環境に応じて最も適切な形式やサイズのものを読み込ませる目的で使用されます。例えば、スマートフォンなどの小さな画面では軽量な画像を、高解像度ディスプレイではより高品質な画像を、WebP形式に対応しているブラウザでは効率的なWebP形式の画像を、といった具合に切り替えることが可能です。
pictureオブジェクトは、複数のsource要素と一つのimg要素を内包して使用されます。source要素には、メディアクエリ（画面幅など）、画像形式（例: image/webp）、ピクセル密度などの条件と、それに対応する画像ファイルのパスを複数指定します。ブラウザはこれらのsource要素の条件を上から順に評価し、現在の表示環境に最も合致するsource要素で指定された画像を自動的に選択して表示します。
どのsource要素の条件にも合致しない場合や、ブラウザがpictureオブジェクト自体に対応していない場合には、最後に記述されたimg要素のsrc属性に指定された画像がフォールバックとして表示されます。これにより、どんな状況でも画像が表示されることが保証されます。
pictureオブジェクトを活用することで、ユーザーの環境に最適化された画像を配信し、不要なデータ転送を削減することでページの読み込み速度を向上させ、ウェブサイトのパフォーマンスとユーザー体験の向上に大きく貢献します。
構文(syntax)
1<picture> 2 <source media="(min-width: 800px)" srcset="images/large.jpg"> 3 <source media="(min-width: 450px)" srcset="images/medium.jpg"> 4 <img src="images/small.jpg" alt="Description of the image"> 5</picture>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML pictureタグで画像表示を最適化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML pictureタグ サンプル</title> 7</head> 8<body> 9 <!-- 10 picture要素は、異なる画面サイズや解像度、または画像フォーマットに応じて、 11 最適な画像ソースをブラウザに選択させるために使用されます。 12 --> 13 <picture> 14 <!-- 15 画面の幅が800ピクセル以上の場合に、"images/large-image.jpg" を表示します。 16 ブラウザは最初に合致するsource要素の画像を使用します。 17 --> 18 <source srcset="images/large-image.jpg" media="(min-width: 800px)"> 19 <!-- 20 画面の幅が450ピクセル以上の場合に、"images/medium-image.jpg" を表示します。 21 この条件は前の条件(800px以上)が合致しなかった場合に考慮されます。 22 --> 23 <source srcset="images/medium-image.jpg" media="(min-width: 450px)"> 24 <!-- 25 上記のどのsource要素の条件も合致しない場合、 26 またはpicture要素をサポートしないブラウザの場合に表示されるデフォルト画像です。 27 このimg要素はpicture要素内で必須であり、フォールバック（代替）の役割を果たします。 28 alt属性は画像が表示されない場合の代替テキストを提供し、アクセシビリティに重要です。 29 loading="lazy" は、画像がビューポートに入るまでロードを遅延させる指示です。 30 --> 31 <img src="images/small-image.jpg" alt="変化する風景のサンプル画像" loading="lazy"> 32 </picture> 33</body> 34</html>
picture要素は、Webページ上で表示する画像を、閲覧環境（画面サイズ、解像度、または画像フォーマットなど）に応じて最適化するために使用するHTMLのタグです。これにより、ユーザーのデバイスに最適な画像を提供し、ページの表示速度向上やデータ通信量の削減に貢献します。
この要素は、複数のsource要素と、必ず一つ配置するimg要素を子要素として持ちます。source要素にはmedia属性で画面幅などの条件を指定し、srcset属性で対応する画像ファイルのパスを記述します。ブラウザはこれらのsource要素を上から順に評価し、最初に条件が合致したsource要素に指定された画像を表示します。
どのsource要素の条件にも合致しない場合、またはpicture要素をサポートしないブラウザのために、最後に配置されたimg要素の画像が表示されます。このimg要素はフォールバック（代替）の役割を果たし、src属性でデフォルトの画像を指定します。img要素のalt属性は、画像が表示されない場合に代替テキストを提供するため、Webアクセシビリティの観点から非常に重要です。また、loading="lazy"属性は、画像がビューポート（画面の表示領域）に入るまで画像の読み込みを遅延させ、初期表示のパフォーマンスを向上させます。
picture要素自体には引数や戻り値はありません。その振る舞いは、内部のsource要素やimg要素に設定される様々な属性（srcset, media, src, alt, loadingなど）によって制御され、これらを組み合わせることで柔軟な画像表示を実現します。
picture要素では、source要素を条件がより具体的なもの（例: 広い画面幅）から順に記述してください。ブラウザは上から順に評価し、最初に条件に合致した画像を採用します。また、picture要素の末尾には必ずimg要素を配置してください。これは、どのsource条件にも合致しない場合や、picture要素に対応していないブラウザのための必須のフォールバック（代替）画像となります。img要素のalt属性は、画像が表示されない際の代替テキストとしてアクセシビリティに非常に重要ですので、内容を具体的に記述しましょう。source要素のmedia属性で表示条件、srcset属性で画像パスを指定します。画像パスはプロジェクトの構成に合わせて適切に設定してください。loading="lazy"は画像の読み込みを遅延させますが、ファーストビューなどすぐに必要な画像への適用は慎重に検討しましょう。
HTML picture要素で画像表示を最適化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML picture要素のサンプル</title> 7</head> 8<body> 9 <!-- 10 picture要素は、WebPなどのモダンな画像フォーマットや、 11 様々な画面サイズ（デスクトップ、タブレット、スマートフォンなど）に応じて、 12 最適な画像をブラウザに選択させて表示するための要素です。 13 これにより、パフォーマンスとユーザーエクスペリエンスを向上させることができます。 14 --> 15 <picture> 16 <!-- 17 source要素は、表示する画像の条件を指定します。 18 ブラウザは上から順に評価し、最初に条件に合致した画像を読み込もうとします。 19 media属性で画面幅の条件（メディアクエリ）を、srcset属性で画像ファイルを、 20 type属性で画像フォーマットを指定します。 21 --> 22 <!-- 画面幅が900px以上の場合に表示されるWebP画像 --> 23 <source srcset="images/large-image.webp" media="(min-width: 900px)" type="image/webp"> 24 <!-- 画面幅が600px以上の場合に表示されるWebP画像 --> 25 <source srcset="images/medium-image.webp" media="(min-width: 600px)" type="image/webp"> 26 <!-- 上記の条件に合致しない場合に表示されるデフォルトのWebP画像 (通常は小さい画面用) --> 27 <source srcset="images/small-image.webp" type="image/webp"> 28 29 <!-- 30 img要素は、picture要素の最後に必ず配置する必要があります。 31 どのsource要素の条件にも合致しない場合、またはpicture要素をサポートしない 32 古いブラウザの場合に、このimg要素で指定された画像がフォールバックとして表示されます。 33 alt属性は、画像が表示されない場合の代替テキストや、スクリーンリーダーのための情報として必須です。 34 --> 35 <img src="images/fallback-image.jpg" alt="レスポンシブ対応のサンプル風景画像"> 36 </picture> 37</body> 38</html>
HTMLのpicture要素は、ウェブサイト上で画像を最適な形で表示するための要素です。様々な画面サイズやデバイス、WebPのような新しい画像形式に対応し、ユーザー体験とページの表示速度を向上させる目的で使用されます。
picture要素自体には直接の引数や戻り値はありませんが、内部に配置する複数のsource要素と、必ず最後に一つ配置するimg要素の組み合わせによって機能します。ブラウザはこれらの子要素の属性情報を評価し、適切な画像を自動的に選択します。
source要素は、media属性で画面の幅などの条件（メディアクエリ）、srcset属性で表示する画像ファイル、type属性で画像の種類（例: image/webp）を指定します。ブラウザはsource要素を上から順に確認し、最初に条件に合致した画像を読み込みます。これにより、例えばPCでは高解像度の画像を、スマートフォンでは軽量な画像を、といった出し分けが可能です。
最後に配置するimg要素は、どのsource要素の条件にも合致しなかった場合や、古いブラウザがpicture要素をサポートしていない場合の「フォールバック」として機能します。必ずsrc属性で代替画像ファイルを指定し、alt属性で画像の内容を説明するテキストを含めることが重要です。このaltテキストは、画像が表示できない場合や、視覚障がい者がスクリーンリーダーを利用する際に役立ちます。
HTMLのpicture要素は、様々な画面サイズやモダンな画像フォーマットに対応し、Webサイトのパフォーマンスとユーザー体験を向上させるために使用します。
source要素は、記述された順に上から評価されます。そのため、より具体的な条件（例えば、画面幅が広い場合）から順に配置することが重要です。ブラウザは最初に合致した条件の画像を読み込みます。
picture要素の最後には、必ずimg要素を配置する必要があります。これは、どのsource要素の条件にも合致しない場合や、picture要素をサポートしない古いブラウザに対して、フォールバック（代替）画像を表示するためのものです。
img要素のalt属性は、画像が表示されない場合の代替テキストや、スクリーンリーダーのための情報として非常に重要ですので、必ず適切な内容を設定してください。また、srcsetやsrc属性で指定する画像ファイルパスは、実際にサーバー上に存在するものを正しく指定する必要があります。