【HTML Living Standard】picture要素の使い方
picture要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
pictureオブジェクトは、異なるデバイスや画面解像度、または指定された条件に基づいて、最適な画像を表示するためのHTML要素を表すオブジェクトです。これは、ウェブサイトの画像を、その表示環境に応じて最も適切な形式やサイズのものを読み込ませる目的で使用されます。例えば、スマートフォンなどの小さな画面では軽量な画像を、高解像度ディスプレイではより高品質な画像を、WebP形式に対応しているブラウザでは効率的なWebP形式の画像を、といった具合に切り替えることが可能です。
pictureオブジェクトは、複数のsource要素と一つのimg要素を内包して使用されます。source要素には、メディアクエリ（画面幅など）、画像形式（例: image/webp）、ピクセル密度などの条件と、それに対応する画像ファイルのパスを複数指定します。ブラウザはこれらのsource要素の条件を上から順に評価し、現在の表示環境に最も合致するsource要素で指定された画像を自動的に選択して表示します。
どのsource要素の条件にも合致しない場合や、ブラウザがpictureオブジェクト自体に対応していない場合には、最後に記述されたimg要素のsrc属性に指定された画像がフォールバックとして表示されます。これにより、どんな状況でも画像が表示されることが保証されます。
pictureオブジェクトを活用することで、ユーザーの環境に最適化された画像を配信し、不要なデータ転送を削減することでページの読み込み速度を向上させ、ウェブサイトのパフォーマンスとユーザー体験の向上に大きく貢献します。
公式リファレンス: <picture>: The Picture element
構文(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)
戻り値なし
戻り値はありません