レスポンシブ画像を作る

レスポンシブデザインは、表示先の画面に合わせてメディア要素を伸縮します。

レスポンシブでないと、小さい画面では画像がコンテナからはみ出してレイアウトが崩れ、高密度ディスプレイではぼやけ、すべてのデバイスが同じ大きなファイルをダウンロードして帯域を無駄にします。

Images を使うと、あらゆるデバイスで最適な表示になるよう、画像を自動でリサイズできます。Cloudflare は、リクエスト時にレスポンシブ画像を配信する 2 つの方法に対応しています。

方法	仕組み	向いている用途
HTML `srcset`	マークアップに複数サイズを列挙し、ビューポートの大きさとディスプレイ密度に応じて、ブラウザーが最適なものを選びます。	使えるサイズを細かく制御したい場合。すべてのブラウザーで動作します。
`width=auto`	1 つの URL から、Cloudflare が最適な幅を自動で選びます。マークアップの変更は不要です。	いちばん簡単な実装。HTML を変更できない場合に特に向いています。

高 DPI ディスプレイ向けに最適化する

画面は物理ピクセル（目に見える個々の点）で画像を表示します。一方、ブラウザーはレイアウトに CSS ピクセル（抽象的な単位）を使います。

標準ディスプレイでは、これらは 1:1 で対応します。高密度ディスプレイ（例: Retina、4K）では、1 CSS ピクセルを複数の物理ピクセルで描画します。たとえば 2x ディスプレイでは 4 物理ピクセル、3x ディスプレイでは 9 物理ピクセルです。

この比率がデバイスピクセル比（DPR）です。画像のシャープさを決めます。2x ディスプレイに 960px の画像を出すと、ブラウザーは 1920 物理ピクセルに引き伸ばすため、ぼやけて見えます。

シャープさを保つには、dpr パラメーターで、高 DPI 向けに別の高解像度版を渡せます。


`width=300,height=200,dpr=1`	`width=300,height=200,dpr=2`

`srcset` 属性を使う

<img> 要素で画像を埋め込むとき、srcset ↗ 属性で、同じ画像の異なるサイズ一覧をブラウザーに渡せます。

ブラウザーは画面サイズ、ピクセル密度、ネットワーク状況を評価し、最適な 1 つを選びます。

次のスニペットは、ユーザーのデバイスピクセル比に応じて 2 つのサイズのどちらかを出すために、<img> タグ内で srcset を使う例です。

<img
	src="portrait-800w.jpg"
	srcset="
		portrait-1600.jpg 2x,
	"
/>

サイズを事前生成する代わりに、Images を使い、各 srcset エントリを同じ元画像に向け、width パラメーターとピクセル密度記述子（例: 2x）だけを変えます。ブラウザーがユーザーのデバイスピクセル比に合う幅を選ぶと、Cloudflare はリクエスト時にリサイズ版を動的に生成します。

<img
	src="/cdn-cgi/image/fit=contain,width=960/assets/product.jpg"
	srcset="/cdn-cgi/image/fit=contain,width=1920/assets/product.jpg 2x"
/>

上の例では、src 属性は 1x ディスプレイ向けの画像です（例: HD/1080p モニター）。srcset 属性は、2x ディスプレイ向けの大きな高 DPI 画像を追加します（例: ほとんどのモバイル端末、4K デスクトップ）。元画像は高解像度を使ってください。低解像度画像を拡大しても、画質は上がらずファイルサイズだけ増えます。

レスポンシブレイアウトを作る

ピクセル密度記述子は、画像の CSS サイズが固定のとき（例: 960px の商品写真）に使い、ビューポート幅は関係しません。画像が何 CSS ピクセルになるかが分かっているので、高 DPI 向けに高解像度版を用意します。

一方、画像がビューポートに合わせて伸縮する場合、つまり CSS サイズが画面幅で変わる場合（例: width: 100%、width: 50vw）は、幅の範囲を渡すために width 記述子（w）を使います。

<img
	width="100%"
	srcset="
		/cdn-cgi/image/fit=contain,width=320/assets/hero.jpg   320w,
		/cdn-cgi/image/fit=contain,width=640/assets/hero.jpg   640w,
		/cdn-cgi/image/fit=contain,width=960/assets/hero.jpg   960w,
		/cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w,
		/cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w
	"
	src="/cdn-cgi/image/width=960/assets/hero.jpg"
/>

w の値は、各選択肢のピクセル幅をブラウザーに伝えます。ブラウザーはビューポート幅とディスプレイ密度の両方を考慮して、最適なものを選びます。

`sizes` 属性を使う

デフォルトでは、ブラウザーは画像がビューポート全体を埋めると仮定します。画像が画面の一部だけを占める場合は、sizes で実際の幅を伝えます。

<!-- Image fills 50% of the viewport -->
<img style="width: 50vw" srcset="..." sizes="50vw" />

メディアクエリやほかの CSS プロパティ（例: max-width）で画像サイズが変わる場合は、条件をすべて sizes 属性に指定します。

<img
	style="max-width: 640px"
	srcset="
		/cdn-cgi/image/fit=contain,width=320/assets/hero.jpg   320w,
		/cdn-cgi/image/fit=contain,width=480/assets/hero.jpg   480w,
		/cdn-cgi/image/fit=contain,width=640/assets/hero.jpg   640w,
		/cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w
	"
	sizes="(max-width: 640px) 100vw, 640px"
/>

上の例では次のとおりです。

画面幅が 640px 未満なら、画像はビューポート全体を埋めます。
画面幅が 640px 超なら、画像はビューポートに合わせて伸縮し、最大 640px です。
640px 超の 2x ディスプレイでは、640px のレイアウト幅を埋めるのに 1280 物理ピクセルが必要なので、ブラウザーは 1280w のエントリを選びます。

`width=auto` を使う

srcset では、使えるサイズを正確に制御できます。その代わり、画像ごとに HTML を更新する必要があります。

一方、width=auto は別の方法です。1 つの URL から、リクエストごとに Cloudflare が適切な幅を決めます。

/cdn-cgi/image/width=auto/assets/hero.jpg

リモート画像を変換フローで最適化する場合に特に便利です。マークアップを変えずに、ゾーン全体に width=auto を適用できます。

リクエストに width=auto が含まれると、Cloudflare は画面サイズに基づいて幅を決めます。送られていれば Client Hints を使い、なければ User-Agent 検出にフォールバックします。

Client Hints（推奨）

Client Hints に対応するブラウザー（Chrome、Edge、Opera）は、リクエストヘッダーでビューポート幅を送ります。Cloudflare はこの値を読み、適切な画像サイズを選びます。

可能なすべてのビューポート幅ごとに固有の画像を生成するのではなく、検出した画面幅以上でいちばん小さいブレークポイントにスナップします。

Client Hints のデフォルトブレークポイントは 320、768、960、1200 ピクセルです。

次の表は、デフォルトブレークポイントに基づいて Cloudflare が選ぶ幅です。検出したビューポート幅が最大ブレークポイントを超える場合は、その最大ブレークポイントで画像を配信します。

検出したビューポート幅	配信する画像幅
280px	320px
500px	768px
960px	960px
1500px	1200px

デフォルトのブレークポイントは、wbreakpoints サブパラメーターで上書きできます。正の整数をセミコロン区切りで指定します。

Client Hints を有効にする

Client Hints は Cloudflare にいちばん正確な情報を渡しますが、サイト側でオプトインが必要です。ないと、width=auto は User-Agent 検出にフォールバックします。

次のいずれかの方法で Client Hints を有効にできます。

HTML の <meta> タグ

ページの <head> で、ほかの要素より前に次を追加します。

<meta
	http-equiv="Delegate-CH"
	content="sec-ch-dpr {ZONE}; sec-ch-viewport-width {ZONE}"
/>

HTTP レスポンスヘッダー

HTML レスポンスに次のヘッダーを追加します。

critical-ch: sec-ch-viewport-width, sec-ch-dpr
permissions-policy: ch-dpr=("{ZONE}"), ch-viewport-width=("{ZONE}")

User-Agent 検出（フォールバック）

Client Hints がない場合、Cloudflare は User-Agent 文字列からデバイスをモバイルかデスクトップかに分類し、対応するサイズを選びます。

User-Agent 検出のデフォルトサイズは次のとおりです。

デバイス種別	デフォルトサイズ
モバイル（User-Agent に `iPhone` または `Android`）	768px
デスクトップ（その他すべての User-Agent）	1200px

デフォルトサイズは、wmobile と wdesktop サブパラメーターで上書きできます。正の整数を指定します。