ブレークポイントと画像

背景

小さなスクリーンと大きなモニターには異なるレイアウトが必要です。 srcset と sizes の目的のために、レイアウトが変更されるポイントを知る必要があります。

Web開発者は、小さなスクリーンでは何を縮小、非表示、または移動するか、またはより一般的には大きなスクリーンでは何を拡大、公開、または追加するかを決定する必要があります。彼らは非常に少ない情報しか持っていません。ユーザーはタブレット、または横向きの電話、または小さなブラウザウィンドウを使用していますか？

レイアウトが変更される任意のビューポート幅を選択する必要があります。これを ブレークポイント と呼びます。これは CSS ピクセルの任意の数字であり（デバイスピクセルではありません）、Polypane には共通に使用されるブレークポイントに関する優れた記事があります。

一部の画像（ロゴやアイコン、ボタンなど）は、これらのブレークポイントによって引き起こされるレイアウトの変更に免疫があり、srcset 密度記述子で問題ありません。

メインコンテンツの画像は、そのコンテナのサイズに制限されます。通常、ページのメインコンテンツ領域は、最大のスクリーンである特定の幅に制限されます。つまり、 max-width が指定されますが、小さなスクリーンでは、メインコンテンツ領域がビューポート全体を占めます。

いくつかのブレークポイントで複数の列がある場合、画像が占めるビューポート幅の割合が変わるため、有効なサイズ指定ルールを計算することがより困難になります。

簡単な方法

それでは、これを過度に複雑にしたりしないでください。おそらく次の近似値で非常に妥当な答えが得られます。

メイン列（または画像のコンテナ）がどのサイズで成長を止めるのですか？ビューポート幅がそれ以下の場合、 sizes 属性に 100vw を使用して画像がビューポート幅の100％を占めるように指定できます。
コンテナが最大で達する幅は何ですか？それを、それ以外のすべてに対して固定された width として設定できます。

1番の答えが700pxで2番の答えが800pxの場合、次の sizes 属性を使用できます。

<!-- これらは CSS Pixels であり、デバイスピクセルや画像ピクセルではありません。  -->
<img [...] sizes="(max-width: 700px) 100vw, 800px"  />

ブラウザーが CSS をダウンロードする前に画像のURLを選択するのが非常に早いため、ブラウザーが計算することができると思うかもしれません。残念ながら、Webブラウザーは先に画像 URL を選択してしまうため、私たちは自分自身で計算する必要があります。完璧でなくても構わないのです。