レスポンシブ画像

ウェブ上のテキストは、画面の端で自動的に折り返され、オーバーフローしません。一方、画像には固有のサイズがあります。画像が画面よりも幅が広い場合、画像はオーバーフローし、ユーザーは横方向にスクロールして画像全体を表示する必要があります。

幸い、CSS にはこのような事態を防ぐためのツールが用意されています。

画像を制限する

スタイルシートで max-inline-size を使用すると、画像をその要素よりも広いサイズでレンダリングできないことを宣言できます。

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 12.1.

Source

img {
  max-inline-size: 100%;
  block-size: auto;
}

同じルールを、動画や iframe などの他の種類の埋め込みコンテンツにも適用できます。

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

このルールを適用すると、ブラウザは画面に収まるように画像を自動的に縮小します。

2 つのスクリーンショット。1 つ目は、ブラウザの幅を超えて拡大された画像を示しています。2 つ目は、同じ画像をブラウザのビューポート内に制限して表示しています。
画像を制約すると、ユーザーはスクロールせずに画像全体を表示できます。

block-size 値を auto に追加すると、ブラウザは画像のサイズを変更する際に画像のアスペクト比を維持します。

画像のサイズは、コンテンツ管理システム(CMS)やその他のコンテンツ配信システムによって設定されることがあります。デザインで CMS のデフォルトとは異なるアスペクト比が必要な場合は、aspect-ratio プロパティを使用してサイトのデザインを維持できます。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

残念ながら、多くの場合、ブラウザは画像を圧縮または伸ばして、目的のスペースに収める必要があります。

ボールをくわえた幸せそうなハンサムな犬の横顔。画像が圧縮されている。
画像のアスペクト比を変更すると、画像が圧縮または拡大表示されます。

圧縮や伸びを防ぐには、object-fit プロパティを使用します。

Browser Support

  • Chrome: 32.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 10.

Source

object-fit 値が contain の場合、ブラウザは画像のアスペクト比を維持し、必要に応じて画像の周囲に空白スペースを残します。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

object-fit の値が cover の場合、ブラウザは画像のアスペクト比を維持し、必要に応じて画像を切り抜きます。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
ボールをくわえた幸せそうなハンサムな犬の横顔。画像の両側に余分なスペースがあります。 ボールをくわえた、幸せそうなハンサムな犬の横顔。画像の上部と下部は切り抜かれている。
同じ画像に 2 つの異なる値の「object-fit」が適用されています。1 つ目のオブジェクトの object-fit 値は contain で、2 つ目のオブジェクトの object-fit 値は cover です。

画像の切り抜きの位置は、object-position プロパティを使用して変更できます。これにより、切り抜きのフォーカスが調整され、画像の最も重要な部分が常に表示されるようにすることができます。

Browser Support

  • Chrome: 32.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 10.

Source

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}
ボールをくわえた幸せそうなハンサムな犬の横顔。画像は下部だけが切り抜かれている。
object-position を設定すると、画像の片側のみを切り抜くことができます。

画像を提供する

これらの CSS ルールは、画像のレンダリング方法をブラウザに指示します。また、ブラウザが画像をどのように処理するかに関するヒントを HTML で指定することもできます。

サイズ設定に関するヒント

画像のサイズがわかっている場合は、常に width 属性と height 属性を含めます。max-inline-size ルールにより画像が異なるサイズでレンダリングされた場合でも、ブラウザは幅と高さの比率を認識しているため、適切なスペースを確保できます。これにより、画像の読み込み時に他のコンテンツがジャンプするのを防ぐことができます。

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>
最初の動画は、画像のサイズが定義されていないレイアウトを示しています。画像の読み込み時にテキストがジャンプします。2 つ目の動画では、画像のサイズが指定されているため、ブラウザは画像のスペースを残し、画像の読み込み時にテキストが飛び散ることはありません。

読み込みに関するヒント

loading 属性を使用して、画像がビューポート内またはビューポートの近くにあるまで画像の読み込みを遅らせるかどうかをブラウザに指示します。折り返しの下にある画像の場合は、値 lazy を使用します。ユーザーが画像が表示される位置までスクロールするまで、ブラウザは遅延読み込み画像を読み込みません。ユーザーがスクロールしない場合、画像は読み込まれません。

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>
遅延読み込みされた画像は、ユーザーがスクロールするまで読み込みを待機します。

折り返しの上部にあるヒーロー画像には loading を使用しないでください。サイトが loading="lazy" 属性を自動的に適用する場合は、通常、loading をデフォルト値の eager に設定して、画像が遅延読み込みされないようにします。

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

取得の優先度

重要な画像(LCP 画像など)の場合は、取得優先度を使用して、fetchpriority 属性を high に設定することで、読み込みの優先度をさらに高めることができます。

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

これにより、ブラウザがレイアウトを完了して通常の画像を取得するまで待つのではなく、画像をすぐに優先度高く取得するようにブラウザに指示します。

ただし、画像などの 1 つのリソースのダウンロードを優先するようにブラウザに指示すると、ブラウザはスクリプトやフォント ファイルなどの他のリソースの優先度を下げる必要があります。本当に重要な場合にのみ、イメージに fetchpriority="high" を設定します。

プリロードに関するヒント

できる限り、すべての画像を最初の HTML ファイルに含めて、プリロードを回避することをおすすめします。ただし、JavaScript で追加された画像や CSS の背景画像など、一部の画像は使用できない場合があります。

プリロードを使用すると、ブラウザがこれらの重要な画像を事前に取得できます。特に重要な画像については、このプリロードを fetchpriority 属性と組み合わせることができます。

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

ブラウザの優先順位付けヒューリスティクスを頻繁にオーバーライドしないように、これらの属性は控えめに使用してください。過度に使用すると、パフォーマンスが低下する可能性があります。

一部のブラウザでは、imagesrcset 属性と imagesizes 属性を使用して、srcset に基づくレスポンシブ画像のプリロードがサポートされています。次に例を示します。

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

href フォールバックを含めないことで、srcset をサポートしていないブラウザでも正しい画像がプリロードされるようにできます。

ブラウザが特定の形式をサポートしているかどうかに応じて、さまざまな形式の画像をプリロードすることはできません。これを試すと、余分なダウンロードが発生し、ユーザーのデータが浪費される可能性があります。

画像のデコード

img 要素に追加できる decoding 属性もあります。画像を非同期でデコードできることをブラウザに伝えて、他のコンテンツの処理を優先できます。

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
>

画像自体が優先すべき最も重要なコンテンツである場合は、sync 値を使用できます。

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 decoding="sync"
>

decoding 属性を変更しても、画像のデコード速度は変わりません。影響するのは、ブラウザが他のコンテンツのレンダリングを開始する前に、この画像のデコードが完了するのを待つかどうかのみです。

ほとんどの場合、この設定による影響はほとんどありませんが、ブラウザで画像などのコンテンツを少し速く表示できることもあります。たとえば、レンダリングに時間のかかる要素や、デコードに時間のかかる大きな画像が多数含まれる大きなドキュメントの場合、重要な画像に sync を設定すると、ブラウザは画像を待機して両方を同時にレンダリングします。または、async を設定して、ブラウザが画像のデコードを待たずにコンテンツをすばやく表示できるようにすることもできます。

ただし、通常は、decoding を使用するのではなく、DOM サイズの過剰を回避し、レスポンシブ画像を使用してデコード時間を短縮することをおすすめします。

srcset を使用したレスポンシブ画像

この max-inline-size: 100% 宣言により、イメージはコンテナから分離されません。ただし、画面が小さく帯域幅の狭いネットワークを使用しているユーザーに、画面の大きいユーザーと同じサイズの画像をダウンロードさせると、データの浪費につながります。

この問題を解決するには、同じ画像の複数のバージョンを異なるサイズで追加し、srcset 属性を使用して、これらのサイズが存在することと、どのサイズを使用するかをブラウザに伝えます。

幅の記述子

srcset は、値のカンマ区切りリストを使用して定義できます。各値は、画像の URL に続いてスペース、画像に関するメタデータ(記述子)が続きます。

この例では、メタデータで w 単位を使用して各画像の幅を記述しています。1 つの w は 1 ピクセルの幅です。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

srcset 属性は、src 属性を置き換えるのではなく、補完します。有効な src 属性は必要ですが、ブラウザは srcset にリストされているオプションのいずれかにその値を置き換えることができます。帯域幅を節約するため、ブラウザは大きな画像をダウンロードするのは必要な場合のみです。

サイズ

幅記述子を使用する場合は、sizes 属性も使用してブラウザに詳細情報を提供する必要があります。これにより、さまざまな条件下で画像を表示するサイズをブラウザに伝えることができます。これらの条件はメディアクエリで指定します。

sizes 属性には、メディアクエリと画像の幅のカンマ区切りリストを指定します。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

この例では、幅が 66em を超えるビューポートでは、画像の幅を画面の 3 分の 1 以下にするようブラウザに指示しています(3 列のレイアウト内など)。

ビューポートの幅が 44em66em の場合は、画像を画面の半分の幅で表示します(2 列のレイアウトの場合など)。

44em より狭い場合は、画像を画面の全幅で表示します。

つまり、最も大きな画像が最も幅の広い画面で使用されるとは限りません。マルチ列レイアウトを表示できる幅広いブラウザ ウィンドウでは、1 つの列に収まる画像が使用されます。この画像は、狭い画面の 1 列レイアウトに使用される画像よりも小さい場合があります。

サイズ記述子を使用して、さまざまな画面サイズでのページのレイアウトを変更します。

ピクセル密度記述子

記述子を使用して、高密度ディスプレイに表示する画像の代替バージョンを提供することもできます。これにより、高解像度で画像の鮮明さを維持できます。

ボールをくわえた幸せそうなハンサムな犬の画像の 2 つのバージョン(1 つは鮮明で、もう 1 つはぼやけている)。
ピクセル密度が低い画像はぼやけて見えることがあります。

密度記述子を使用して、src 属性の画像を基準とした画像のピクセル密度を記述します。密度記述子は、1x2x のように、数値の後に文字 x が付いています。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

small-image.png のサイズが 300 x 200 ピクセルで、medium-image.png のサイズが 600 x 400 ピクセルの場合、medium-image.png の後に 2x を追加して srcset リストに登録できます。

整数値を使用する必要はありません。別のバージョンの画像のサイズが 450×300 ピクセルの場合は、1.5x で記述できます。

プレゼンテーション用画像

HTML の画像はコンテンツです。そのため、スクリーン リーダーと検索エンジン向けに、画像の説明を含む alt 属性を追加します。

意味のあるコンテンツのない装飾的な画像を埋め込む場合は、空の alt 属性を使用できます。

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

alt 属性は、空であっても必ず含める必要があります。空の alt 属性は、画像がプレゼンテーション用であることをスクリーン リーダーに伝えます。alt 属性がない場合、その情報は提供されません。

表示用または装飾用の画像は、HTML ではなく CSS で含めることが理想的です。HTML は構造用です。CSS は表示用です。

背景画像

プレゼンテーション用画像を読み込むには、CSS の background-image プロパティを使用します。

element {
  background-image: url(flourish.png);
}

background-imageimage-set 関数を使用して、複数の画像候補を指定できます。

CSS の image-set 関数は、HTML の srcset 属性とよく似ています。ピクセル密度記述子を含む画像のリストを指定します。

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

ブラウザは、デバイスのピクセル密度に最も適した画像を選択します。

サイトに画像を追加する際には、次のような多くの要素を考慮する必要があります。

  • 各画像に適切なスペースを予約する。
  • 必要なサイズを把握する。
  • 画像がコンテンツか装飾的なものかを判断する。

画像を適切に設定するために時間をかける価値はあります。画像戦略が不適切だと、ユーザーの不満やイライラにつながる可能性があります。優れた画像戦略を策定すると、ユーザーのデバイスやネットワーク接続に関係なく、サイトがスムーズでシャープな印象を与えることができます。

画像をより細かく制御できる HTML 要素がツールキットにもう 1 つあります。それは picture 要素です。

理解度を確認する

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

画像をビューポート内に収めるには、スタイルを追加する必要があります。

正しい
制限のない画像は、自然なサイズと同じ大きさになります。
False
スタイルは必須です。

画像の高さと幅が不自然なアスペクト比に強制的に設定されている場合、画像をこれらの比率に収まるように調整するには、どのスタイルを使用すればよいですか。

object-fit
画像がキーワード(containcover など)にどのように適合するかを指定します。
image-fit
このプロパティは存在しません。私が作ったものです。
fit-image
このプロパティは存在しません。私が作ったものです。
aspect-ratio
これにより、画像のアスペクト比が不自然になる場合や、不自然なアスペクト比が解消される場合があります。

画像に heightwidth を適用すると、CSS で画像のスタイルを変更できなくなります。

正しい
ルールというよりヒントと考えてください。
False
CSS には、高さと幅がタグにインラインで指定されている場合でも、画像のサイズを設定するための動的オプションが多数用意されています。

srcset 属性は src 属性を _______ ではなく、_______ します。

補完、置き換え
srcsetsrc 属性に代わるものではありません。
置換、補完
ブラウザが対応している場合は、ブラウザが選択できる追加のオプションが提供されます。

画像に alt がない場合、空の alt と同じです。

正しい
空の alt 属性は、この画像がプレゼンテーション用であることをスクリーン リーダーに伝えます。
False
alt がない場合、スクリーン リーダーには何も通知されません。