画像要素

前のモジュールでは、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 要素が強力なツールとなります。

どちらのソリューションも必要のない画像もあります。アイコンがあります。次のステップ

理解度をチェックする

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