画像要素

前のモジュールでは、srcset 属性を使用して同じ画像の異なるサイズのバージョンを指定する方法について説明しました。これにより、ブラウザはどちらのバージョンを使用するかを決定できます。画像を完全に変更するには、picture 要素が必要です。

srcset が src 属性に基づいているのと同様に、picture 要素は img 要素に基づいています。picture 要素は img 要素をラップ アラウンドします。

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

picture 要素内にネストされた img 要素がない場合、picture 要素は機能しません。

srcset 属性と同様に、picture 要素も img 要素の src 属性の値を更新します。違いは、srcset 属性がブラウザに提案を提示するのに対し、picture 要素はコマンドを提供する点です。ユーザーがコントロールできます。

source

picture 要素内に複数の source 要素を指定し、それぞれに独自の srcset 属性を設定できます。ブラウザは、実行可能な最初の候補を実行します。

画像形式

この例では、3 つの異なる形式で 3 つの異なる画像を使用しています。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

最初の source 要素は、新しい AVIF 形式の画像を指します。ブラウザが AVIF 画像をレンダリングできる場合は、この画像ファイルが選択されます。それ以外の場合は、次の source 要素に進みます。

2 番目の source 要素は、WebP 形式の画像を指します。ブラウザが WebP 画像をレンダリングできる場合は、その画像ファイルが使用されます。

それ以外の場合、ブラウザは img 要素の src 属性にある画像ファイルにフォールバックします。その画像は JPEG です。

つまり、下位互換性を損なうことなく、新しい画像形式を使い始めることができます。

この例では、type 属性により、指定された画像形式の種類をブラウザに伝えています。

画像サイズ

画像形式を切り替えるだけでなく、画像サイズを切り替えることもできます。media 属性を使用して、画像の表示幅をブラウザに指示します。メディアクエリは media 属性内に含めます。

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

ここでは、ビューポートの幅が 75em よりも広い場合、大きな画像を使用する必要があることをブラウザに伝えます。40em～75em の間、ブラウザは中程度の画像を使用する必要があります。40em の下で、ブラウザで小さい画像を使用する必要があります。

これは、img 要素で srcset 属性と sizes 属性を使用する場合とは異なります。その場合は、ブラウザに候補を表示します。source 要素は、提案というよりもコマンドのようなものです。

ピクセル密度記述子は、source 要素の srcset 属性内で使用することもできます。

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

この例でも、さまざまなブレークポイントで何をすべきかをブラウザに指示していますが、ブラウザにはデバイスのピクセル密度に最適な画像を選択するためのオプションがあります。

切り抜き

同じ画像についてサイズが異なるバージョンのみを配信する場合は、srcset が最適です。ただし、小さいサイズで画像がうまく表示されない場合は、画像を切り抜いてみてください。

状況に応じて、画像の幅と高さの比率が異なる場合があります。たとえば、モバイル ブラウザでは幅が狭く縦長の切り抜きを配信し、パソコンのブラウザでは横幅が狭い切り抜きを配信したい場合があります。

ビューポートの幅に応じてコンテンツと形状を変更するヒーロー画像の例を次に示します。各 source 要素に width 属性と height 属性を追加します。

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

画像のソースに応じて alt 属性を変更することはできません。フルサイズの画像と切り抜かれた画像の両方を説明する alt 属性を記述する必要があります。

レスポンシブな画像のほとんどでは、picture 要素を使用する必要はないでしょう。img 要素の srcset 属性と sizes 属性で多くのユースケースに対応できます。しかし、よりきめ細かい制御が必要な状況では、picture 要素が強力なツールです。

どちらの解決策も必要としない画像があります。それはアイコンです。次の手順は以上です。

理解度をチェックする

画像元素に関する知識をテストする