レスポンシブ画像

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

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

画像を制約する

スタイルシートで max-inline-size を使用すると、画像が包含要素の幅を超えるサイズでレンダリングされないように宣言できます。

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

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

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

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

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

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

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

残念ながら、多くの場合、ブラウザは画像を縮小または拡大して、意図したスペースに収める必要があります。

縮小や拡大を防ぐには、object-fit プロパティを使用します。

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;
}

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

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

画像を配信する

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

サイズ設定のヒント

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

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

読み込みのヒント

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 をサポートしていないブラウザでも正しい画像がプリロードされるようにできます。

特定の形式のブラウザ サポートに基づいて、異なる形式の画像をプリロードすることはできません。この方法を試すと、ユーザーのデータを無駄にする余分なダウンロードが発生する可能性があります。

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 列レイアウトの場合）。

ビューポートの幅が 44em～66em の場合は、画面の幅の半分で画像を表示します（2 列レイアウトの場合と同様）。

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

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

ピクセル密度記述子

また、高密度ディスプレイで表示する画像の代替バージョンを指定するために、ディスクリプタを使用することもできます。これにより、高解像度でも画像が鮮明に表示されます。

密度記述子を使用して、src 属性の画像に対する画像のピクセル密度を記述します。密度記述子は、1x や 2x のように、数字の後に文字 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 × 200 ピクセルで、medium-image.png のサイズが 600 × 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-image の image-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 要素です。

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

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