ブレークポイントと画像

背景

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

ウェブ開発者は、小さい画面で何を縮小し、隠し、移動するか、または大きな画面で何を拡大し、明らかにし、追加するかを決定しなければなりません。そして、利用できる情報は非常に限られています。ユーザーはタブレットを使用しているのか、横向きモードのスマートフォンなのか、それとも小さなブラウザウィンドウなのか？

我々は、レイアウトが変わる任意のビューポート幅を選ばなければなりません。これはブレークポイントと呼ばれます。これはCSSピクセルの任意の数値です（デバイスピクセルではありません）。Polypaneには、よく使用されるブレークポイントについての優れた記事があります。

一部の画像（ロゴやアイコン、ボタンなど）は、これらのブレークポイントによって引き起こされるレイアウトシフトを免れる可能性があります（そしてsrcsetの密度記述子を使用して問題ないかもしれません）。

メインコンテンツの画像は、そのコンテナのサイズによって制限されます。通常、ページのメインコンテンツエリアは、最大画面上で特定の幅、max-widthで制限されますが、小さな画面では、メインコンテンツエリアはビューポート全体を埋めます。

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

簡単な方法

とはいえ、これをあまり深く考えすぎないでください。以下の近似でおそらく十分です：

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

質問の1に対する答えが700px、2に対する答えが800pxであった場合、以下のsizes属性を使用できます：

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

ブラウザがCSSに基づいてこれらの計算をうまく処理できると思うかもしれません。残念ながら、ブラウザはスタイルシートがダウンロードされる前に画像URLを選択しようと積極的であるため、計算を自分で行う必要があります。そして、完璧でなければ仕方ないのです。