画像要素

前のモジュールでは、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">
</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">
</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"
    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" fetchpriority="high">
</picture>

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

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

どちらの解決策も必要ない画像の種類が 1 つあります。アイコンです。次はそれについて説明します。

理解度をチェックしましょう

picture 要素の知識をテストする