前のモジュールでは、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
要素が強力なツールとなります。
どちらのソリューションも必要のない画像もあります。アイコンがあります。次のステップ
理解度をチェックする
画像要素に関する知識をテストする
srcset
属性でブラウザに ________ を提供するのに対し、<picture>
要素は ________ を提供します。
<picture>
要素の機能は次のとおりです。
avif
または webp
のファイルをできる限り小さくし、ダウンロードしやすいようにする。