機能

Cloudflare を使うと、異なるバージョンの画像をリアルタイムで動的に生成し、大規模に画像を最適化できます。

このガイドでは、画像のリサイズ、トリミング、加工、視覚効果に使えるすべてのパラメーターを説明します。

Cloudflare の画像最適化は、次の方法で使えます。

• URL インターフェース — 画像 URL にパラメーターを直接指定し、ブラウザーへ配信するときの最適化方法を決めます。
• Workers — Images API を Worker に直接バインドするか、fetch サブリクエストの cf.image オプションを設定して、プログラムから画像ワークフローを組み立てます。

リモート画像を最適化するか、ホスト済み画像を最適化するかで、Cloudflare が使う URL の構造は異なります。リモート画像は リモート、ホスト済み画像は ホスト済み を参照してください。

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE-ID>/<VARIANT-OR-OPTIONS>

Workers で Images を使う 場合、次のことができます。

• 最適化の適用順をカスタムロジックで決めます。たとえば、デフォルトでは Images は flip を rotate より先に適用します。Images バインディングを使えば、回転してから反転する、といった最適化ワークフローに変更できます。
• デフォルトの URL 構造ではなく、カスタム URL スキームを使います。
• コンテンツネゴシエーションを実装し、端末やネットワークの状態に合わせて画像のサイズ、フォーマット、品質を動的に調整します。

入力ファイルのアニメーションフレームを保持するかどうかを指定します。

• true（デフォルト） — 全フレームを含むアニメーション画像を出力します。
• false — アニメーション入力の先頭フレームを静止画に変換します。

画像を拡大するときや、ユーザーがアップロードした任意のコンテンツを処理するときは、この設定を推奨します。アニメーション GIF はファイルサイズが大きく、ページの読み込み時間が増えることがあるためです。format=json を使うときも、anim=false を指定するとフレーム数を含めずに応答が速くなります。

オリジナル	anim=false

anim=false

cf: {image: {anim: false}}

画像の空白または透明なピクセルを埋める、不透明または透明な色を指定します。デフォルトは %23FFFFFF（白）です。

次の値を指定できます。

• HEX カラーコード。形式は %23RRGGBB です。
• CSS の色名。例: white や red。
• rgb() または rgba() の CSS カラー関数。例: rgba(250,40,145,0.5)。

背景色は、透明なピクセルを含む画像で表示されます。fit=pad でリサイズした画像も対象です。

元画像 1080 x 720	出力 1080 x 900

background=%23ff0000
background=red
background=rgb%28240%2C40%2C145%29

cf: {image: {background: "#RRGGBB"}}
cf: {image: {background: "rgba(240,40,145,0)"}}

画像にぼかし半径を適用します。0（ぼかしなし）から 250（最大ぼかし）までの整数を指定できます。デフォルトは 0 です。

URL 経由で最適化する場合、このパラメーターで画像の内容を確実に隠す用途には使わないでください。URL を変更して blur パラメーターを外せるためです。代わりに、Workers で 元画像へのアクセスを制限 できます。

元の画像	blur=50

blur=50

cf: {image: {blur: 50}}

画像の周囲に枠線を追加します。

次のプロパティを指定できます。

• color — 枠線の色を設定します。有効な CSS の色を指定できます。例: #FF0000、rgb(0,0,0)、red。
• width — 四辺すべてに同じ幅（ピクセル）の枠線を設定します。
• top、right、bottom、left — 各辺の枠線幅をピクセル単位で設定します。

枠線は、画像のリサイズ後に適用されます。高解像度の画面でも鮮明になるよう、枠線の幅は dpr パラメーターに合わせて自動でスケールします。

cf: {image: {border: {color: "rgb(0,0,0,0)", top: 5, right: 10, bottom: 5, left: 10}}}
cf: {image: {border: {color: "#FFFFFF", width: 10}}}

画像全体の輝度を乗数で調整します。

• 1（デフォルト） — 元の輝度を変えません。
• < 1.0 — 画像を暗くします。たとえば 0.5 は元の半分の明るさです。
• > 1.0 — 画像を明るくします。たとえば 2 は 2 倍の明るさです。

オリジナル	brightness=0.5	brightness=2

brightness=0.5

cf: {image: {brightness: 0.5}}

圧縮が最も速い出力形式を選びます。指定できる値は fast です。デフォルトはなしです。

compression=fast オプションは、出力品質やファイルサイズよりエンコード速度を優先します。通常は format パラメーターを上書きし、AVIF や WebP などのより効率的な形式ではなく JPEG を選びます。キャッシュミス時のレイテンシはわずかに下がりますが、ファイルサイズが大きくなり、画質が低下することがあります。

このオプションは、キャッシュできない動的生成画像のリサイズなど、特殊な状況を除き推奨しません。

compression=fast

cf: {image: {compression: "fast"}}

画像の最も暗い部分と最も明るい部分の全体的な差を、乗数で調整します。

• 1（デフォルト） — 元のコントラストを変えません。
• < 1.0 — コントラストを下げます。シャドウが明るく、ハイライトが暗くなります。
• > 1.0 — コントラストを上げます。シャドウは黒に、ハイライトは白に近づきます。

元の画像	contrast=0.5	contrast=2

contrast=0.5

cf: {image: {contrast: 0.5}}

出力解像度を倍率でスケールし、ユーザーの画面密度（Retina や 4K など）に合わせます。デフォルトは 1 で、指定した幅と高さのまま画像を配信します。対応する最大値は 2 です。

最近のデバイスでは、物理ピクセル数が CSS ピクセル数より多くなっています。高 DPR のスマートフォンで、300px のコンテナに 300px の画像を出すとぼやけて見えます。dpr=2 を指定すると、同じ 300px のコンテナに対して Cloudflare が 600px の画像を送り、より鮮明でシャープな画像になります。

dpr パラメーターは srcset と組み合わせて、レスポンシブ画像を配信 できます。

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

dpr=1

cf: {image: {dpr: 1}}

画像を対象領域にどう収めるかを指定します。

フィットは、画像の width と height を設定したあとに適用されます。

fit=pad

cf: {image: {fit: "pad"}}

指定した寸法に収まるよう、元のアスペクト比を保ったまま画像をリサイズします。拡大はしません。これがデフォルトの fit 動作です。

元画像が対象領域より小さい場合は、元の寸法のまま返します。たとえば、1080x720 の画像を 2000x2000 で配信するよう要求すると、1080x720 のまま返されます。

元画像が大きい場合は、元のアスペクト比を保ったまま対象領域に収まるよう縮小します。

次の例では、1080x720 の画像を対象の 500x500 領域に収まるようリサイズします。scale-down は元のアスペクト比（3:2）を保つため、出力画像の最終寸法は 500x333 です。

元画像 1080 x 720 (3:2)	指定サイズ 500 x 500 (1:1)	出力 500 x 333 (3:2)

対象の width と height の範囲内で、元のアスペクト比を保ったまま、可能な限り大きくなるようリサイズします。

元画像が対象領域より大きい場合は、scale-down と同様に対象領域に収まるよう縮小します。

小さい場合は、scale-up と同様に拡大します。拡大アルゴリズムは upscale パラメーターで制御できます。拡大したくない場合は scale-down を使います。

対象領域をすべて埋めます。必要に応じて画像を縮小または拡大します。出力領域は、指定した width と height と常に一致します。

元画像と対象のアスペクト比が異なる場合は、対象領域全体を覆うようリサイズし、はみ出した部分をトリミングします。トリミング時に残す部分は gravity パラメーターで制御できます。

拡大アルゴリズムは upscale パラメーターで制御できます。

次の例では、1080×720 の画像をまず 750×500 にリサイズして（指定した高さに合わせ）対象領域に収め、左右をトリミングして最終的な 500x500 にします。

元画像 1080 x 720 (3:2)	指定サイズ 500 x 500 (1:1)	出力 500 x 500 (1:1)

元画像が対象領域より小さい場合は拡大します。拡大したくない場合は crop を使います。

拡大せずに、対象領域を埋めるよう画像をリサイズします。

元画像が対象領域より小さい場合は、scale-down と同様に元のサイズとアスペクト比を保ちます。

次の例では、元画像（1080x720）が対象領域（1296x1296）より小さいため、元のサイズとアスペクト比を保ちます。

元画像 1080 x 720 (3:2)	指定サイズ 1296 x 1296 (1:1)	出力 1080 x 720 (3:2)

元画像が対象領域より大きい場合は、cover と同じ動きになります（対象領域を埋め、残りをトリミングします）。

対象のアスペクト比に合わせて画像をトリミングします。必要に応じて縮小しますが、拡大はしません。

元画像が対象領域より大きい場合は、対象寸法を埋める最小サイズまで縮小したあと、対象のアスペクト比に合わせてトリミングします（cover と同様）。

元画像が対象領域より小さい場合は、元のサイズを保ったまま、対象のアスペクト比に合わせてトリミングします。小さい画像のサイズと寸法を保つ crop と違い、aspect-crop は常に対象のアスペクト比を適用します。

たとえば、612x613 の画像を 1920x1120 で要求しても拡大しません。元のサイズのまま、1920:1120 のアスペクト比に合わせて 612x357 にトリミングします。トリミング時に残す部分は gravity パラメーターで制御できます。

指定寸法の範囲内で、可能な限り大きくなるよう画像をリサイズします。該当する場合、出力領域は width と height にぴったり合うよう拡張されます。

空白や透明なピクセルは background パラメーターで埋められます。ただし Web アプリでは、contain オプションと CSS の object-fit: contain で同じ見た目にできることが多く、パディング用ピクセルを画像自体に埋め込む必要がありません。

次の例では、元画像（1080x720）が対象領域（1080x1080）より小さいため、残りのピクセル分の余白ができます。

元画像 1080 x 720 (3:2)	指定サイズ 1080 x 1080 (1:1)	出力 1080 x 1080 (1:1)

端をトリミングしたり、一部を制限したりせず、指定した幅と高さちょうどに画像をリサイズします。

元画像と対象のアスペクト比が異なる場合、対象領域に合わせて画像が歪みます。

元画像 1080 x 720	出力 1080 x 540

元画像 1080 x 1080	出力 1080 x 540

指定した寸法に収まるよう、元のアスペクト比を保ったまま画像をリサイズします。縮小はしません。scale-down の逆の動作です。

元画像が対象領域より大きい場合は、元の寸法のまま返します。

元画像が対象領域より小さい場合は、対象寸法に収まるよう拡大します。拡大アルゴリズムは upscale パラメーターで制御できます。AI による拡大は upscale=generate、バイキュービック補間（デフォルト）は upscale=interpolate を指定します。

画像を水平方向、垂直方向、またはその両方に反転します。

次の値を指定できます。

• h — 画像を水平方向に反転します。
• v — 画像を垂直方向に反転します。
• hv — 画像を水平方向と垂直方向の両方に反転します。

flip は rotate パラメーターと組み合わせて、画像の向きを設定できます。反転は回転より先に実行されます。たとえば flip=h,rotate=90 を適用すると、画像は先に水平方向に反転され、そのあと 90 度回転します。

元の画像	flip=h	flip=v

flip=h

cf: {image: {flip: "h"}}

画像の出力形式を指定します。

次の値を受け付けます。

• auto — リクエスト元のブラウザーが対応する、最も効率的な形式を自動で配信します。ホスト済み画像 を配信する場合、これがデフォルトの format オプションです。
• avif — 可能な場合、画像を AVIF にトランスコードします。AVIF のエンコードは、ほかの形式より桁違いに遅くなることがあります。画像が大きく、AVIF へのエンコードが間に合わない場合、Cloudflare は WebP または JPEG にフォールバックします。
• webp — 画像を Google WebP 形式にトランスコードします。可逆 WebP を返すには quality=100 を使います。
• jpeg — 画像をインターレースプログレッシブ JPEG 形式にトランスコードします。複数パスで、段階的に詳細を上げながら圧縮します。
• baseline-jpeg — 画像をベースラインシーケンシャル JPEG 形式にトランスコードします。対象デバイスがプログレッシブ JPEG やほかの新しいファイル形式に対応していない場合に使います。
• json — 画像の情報を JSON オブジェクトとして出力します。リサイズ前後の画像サイズ、元画像の MIME タイプ、ファイルサイズなどが含まれます。

format=auto
f=auto

cf: {image: {format: "avif"}}

カスタム Worker で format=auto を使うには、Accept ヘッダーを解析する必要があります。画像変換 Worker の設定方法の全体像は、この Worker の例 を参照してください。

const accept = request.headers.get("accept");
let image = {};

if (/image\/avif/.test(accept)) {
	image.format = "avif";
} else if (/image\/webp/.test(accept)) {
	image.format = "webp";
}

return fetch(url, { cf: { image } });

乗数を使って画像の露出を調整します。Gamma はミッドトーンの明るさを制御し、最も暗い部分や最も明るい部分には影響しません。

• 0 と 1（デフォルト） — 元のガンマを変更しません。
• < 1.0 — ミッドトーンの明るさを上げ、画像全体が明るく見えます。
• > 1.0 — ミッドトーンの明るさを下げ、画像全体が暗く見えます。

元の画像	gamma=0.5	gamma=2

gamma=0.5

cf: {image: {gamma: 0.5}}

fit=cover および fit=crop と一緒に使うとき、画像をどのように切り抜くかを指定します。デフォルトでは、Cloudflare は元画像の中心点に向かって切り抜きます。

auto、face、辺（left、right、top、bottom）、相対座標（XxY）を指定できます。

gravity=auto
g=auto
gravity=face
gravity=left
gravity=0.5x1

cf: {image: {gravity: "auto"}}
cf: {image: {gravity: "face"}}
cf: {image: {gravity: "left"}}
cf: {image: {gravity: {x:0.5, y:0.2}}}

顕著性（saliency）アルゴリズムで、視覚的にもっとも目立つピクセルを検出し、焦点を自動で設定します。

画像の内容が事前にわからない場合（ユーザー生成コンテンツなど）に便利です。EC の商品ギャラリーのような大規模な画像ライブラリでは、画像ごとに焦点を手作業で設定する必要がなくなります。

元画像	デフォルトの切り抜き	gravity=auto

画像内の顔に基づいて、焦点を自動で設定します。

zoom パラメーターと組み合わせて、顔にどれだけ近づけて切り抜くかを指定できます。

元画像	デフォルトの切り抜き	gravity=face

写真: Suad Kamardeen (@suadkamardeen) on Unsplash ↗

切り抜かない側を指定します。

次の例では、1080x720 の画像を、下端から始めて 1080x400 の領域に切り抜きます。

元画像	gravity=bottom

焦点（X, Y）を設定し、出力画像の相対座標が元画像の相対座標に来るようにします。XxY 形式の座標ペアを指定します。X と Y は 0.0 から 1.0 の小数です。

• 横方向の値（X） — 0.0 が画像の左端、1.0 が右端です。
• 縦方向の値（Y） — 0.0 が画像の上端、1.0 が下端です。

次の例では、900x900 の画像を、0.33x0.5 の gravity ポイントで 300x900 に切り抜きます。

• 元画像と対象領域の両方で、gravity ポイントは左端から幅の 1/3、上端から高さの 1/2 に置きます。
• 出力の gravity ポイントの相対座標は、元画像の相対座標に揃えます。つまり、対象領域は gravity ポイントが元画像と同じ相対位置（0.33, 0.5）に来るように置きます。
• 画像の暗い部分は、要求した出力の外側であり、切り抜かれる領域です。
• 最終的な切り抜き結果は、gravity ポイント（0.33, 0.5）周辺の 300x900 の内容を捉えます。

元画像	整列	切り抜き	出力

Workers 経由で最適化する場合は、オブジェクト {x, y} で座標を指定します。たとえば {fit: "cover", gravity: {x:0.5, y:0.2}} は、元画像の高さの 20% の位置をできるだけ残すように、各辺を切り抜きます。

正の整数で、出力画像の高さをピクセル単位で設定します。デフォルトでは、Cloudflare は入力画像の元の高さを使います。

height を設定すると、実際の動作は fit パラメーターに依存します。

height=250
h=250

cf: {image: {height: 250}}

JPEG 画像で残す不可視メタデータ（EXIF）の量を制御します。その他の出力形式（WebP や PNG など）では、メタデータは常に破棄されます。

メタデータを破棄する場合でも、カラープロファイルと EXIF の回転は画像に適用されます。

次の値を指定できます。

• copyright（デフォルト）— EXIF の copyright タグ以外のメタデータをすべて破棄します。
• keep — GPS 位置情報を含む、ほとんどの EXIF メタデータを残します（存在する場合）。
• none — 不可視の EXIF メタデータをすべて破棄します。

metadata=none

cf: {image: {metadata: "none"}}

変換を妨げる致命的なエラーが発生した場合、エンドユーザーを元のソース画像の URL へリダイレクトします。redirect を指定できます。デフォルトはなしです。

このオプションは、画像が同じゾーンにある場合にのみ機能します（サブドメインは許可されます）。元の画像が別のゾーンにある場合、このオプションは効果がありません。

画像にユーザー認証が必要で、Workers から匿名で取得できない場合に役立ちます。ただし、ソース画像が非常に大きい場合は、このオプションは推奨しません。

onerror=redirect

JPEG、WebP、AVIF 形式の画像の出力品質を、固定値または知覚品質レベルで指定します。デフォルトは 85 です。

• 固定品質 — 1（低品質、小さいファイルサイズ）から 100（高品質、大きいファイルサイズ）までの正の整数を指定します。
• 知覚品質 — high、medium-high、medium-low、low を指定できます。

出力形式が PNG の場合、quality を明示的に設定すると、PNG8（パレット）形式を使えます。

quality=50
quality=low
q=50

cf: {image: {quality: 50}}
cf: {image: {quality: "high"}}

画像を指定した度数で回転します。90、180、270 を受け付けます。デフォルトは 0（回転なし）です。

回転はリサイズより先に行われます。width と height オプションは、回転後の軸を指します。

元画像	rotate=180

rotate=90

cf: {image: {rotate: 90}}

画像の彩度を乗数で調整します。

• 0 — 彩度を完全に落とします（グレースケール）。
• < 1.0 — 色の強さを下げます。たとえば 0.5 は元の半分の彩度です。
• 1（デフォルト） — 元の彩度を変えません。
• > 1.0 — 色の強さを上げます。たとえば 2 は 2 倍の彩度です。

オリジナル	saturation=0	saturation=2

saturation=0.5

cf: {image: {saturation: 0.5}}

背景を透明なピクセルに置き換え、画像の被写体を自動的に切り出します。指定できる値は foreground です。デフォルトはなしです。

この機能は、Workers AI 経由でオープンソースモデルの BiRefNet を使います。Cloudflare の 責任ある AI への取り組み ↗ も参照してください。

元画像	segment=foreground

segment=foreground

cf: {image: {segment: "foreground"}}

画像のエッジを強調するシャープ化フィルターを適用します。0（シャープ化なし）から 10（最大シャープ化）までの小数を指定できます。デフォルトは 0 です。縮小した画像には 1 を推奨します。

元の画像	sharpen=5

sharpen=2

cf: {image: {sharpen: 2}}

低速接続を検出すると、quality の値を上書きします。quality と同じ固定値または知覚品質の設定を指定できます。デフォルトはなしです。

低速接続を検出するには、HTTP ヘッダーで次のいずれかの Client Hints を有効にします。

accept-ch: rtt, save-data, ect, downlink

slow-connection-quality は、Client Hint が存在し、次のいずれかの条件を満たすときに適用されます。

• rtt ↗: 150ms 超。
• save-data ↗: 値が "on"。
• ect ↗: 値が slow-2g|2g|3g のいずれか。
• downlink ↗: 5Mbps 未満。

slow-connection-quality=50
scq=50

画像の各辺からピクセルを取り除きます。

枠線の色、または各辺から指定したピクセル数で画像をトリムできます。

Trim は dpr パラメーターを考慮し、リサイズと回転の前に実行されます。

枠線の色に基づいて、画像の各辺を自動でトリムします。

trim=border オプションは、次のパラメーターでさらに調整できます。

• trim.border.color — トリムする枠線の色を選びます。CSS4 の現行構文で任意の CSS 色を指定できます。省略した場合、色は自動検出されます。
• trim.border.tolerance — 検出したピクセルが色としてどれだけ近く一致する必要があるかを設定します。0（一致不要）から 255（完全一致）までの整数を指定できます。
• trim.border.keep — 元の枠線のうち、トリムせずに残すピクセル数を指定します。

画像の各辺から取り除くピクセル数を指定します。セミコロン区切りの 4 つの値を指定すると、4 辺すべてを一度に設定できます。

すべての trim 値は、整数（ピクセル数）か、0 から 1 の小数（画像の寸法に対する割合）を受け付けます。たとえば 0.25 は、その辺から 25% をトリムします。

次のパラメーターで、特定の辺だけに trim を適用することもできます。

• trim.top — 画像の上端からピクセルを取り除きます。
• trim.left — 画像の左端からピクセルを取り除きます。
• trim.height — 上端からの画像の高さを設定し、それより下をすべてトリムします。
• trim.width — 左端からの画像の幅を設定し、それより右をすべてトリムします。

trim=border
trim.height=800
// This sets the height of the image to 800 pixels from the top of the image, then trims everything below that point

trim.left=800
// This removes 800 pixels from the left of the image

trim=0.1;0.2;0.1;0.2
// This trims 10% from the top and bottom, and 20% from the left and right

trim.top=0.25
// This trims 25% of the image height from the top

cf: {image: {trim: {top: 12, right: 78, bottom: 34, left: 56, width: 678, height: 678}}}
// Using decimals to trim 10% from each side:
cf: {image: {trim: {top: 0.1, right: 0.1, bottom: 0.1, left: 0.1}}}

画像を拡大するときに使うアルゴリズムを制御します。このパラメーターは、contain、cover、scale-up など、拡大する任意の fit モードで動作します。fit=scale-down の場合や、対象サイズが元画像より小さい場合は効果がありません。

次の値を指定できます。

• interpolate（デフォルト） — バイキュービック補間を使います。画質が落ちることがあります。upscale を指定しない場合のデフォルト動作です。
• generate — AI アップスケーリング（ESRGAN ↗）を使い、拡大時によりシャープで詳細な結果を生成します。

upscale=generate を指定すると、AI モデルは対応する最も近い倍率（2 倍または 4 倍）で 1 回実行し、そのあと正確な対象サイズに合わせます。4 倍を超える倍率は、まず AI で 4 倍まで拡大し、残りをバイキュービック補間で処理します。

upscale=generate

cf: {image: {upscale: "generate"}}

正の整数で、出力画像の幅をピクセル単位で指定します。デフォルトでは、Cloudflare は入力画像の元の幅を使います。

width を設定した場合の動作は、fit パラメーターによって変わります。

次の値を指定できます。

• ピクセル数（例: 250）。
• auto — ブラウザーとデバイスに関する利用可能な情報に基づき、最適な幅で画像を自動配信します。サブパラメーターとして wbreakpoints（クライアントヒント）、wmobile（ユーザーエージェント検出）、wdesktop（ユーザーエージェント検出）を受け付けます。

width=250
w=250

cf: {image: {width: 250}}

width=auto を指定すると、Cloudflare はブラウザーが送るクライアントヒント、またはフォールバックとしてユーザーエージェント検出の情報を使って画像をリサイズします。

width=auto の動作は、次のサブパラメーターでカスタマイズできます。

リモート画像を width=auto で最適化する場合、一意な幅ごとに 課金対象の変換 としてカウントされます。

width=auto の仕組みは、レスポンシブ画像の配信 を参照してください。

wbreakpoints=320;768;960;1920 // Changes the largest breakpoint to 1920 pixels
wbreakpoints=320;768;960;1200;1920 // Adds another breakpoint at 1920 pixels

cf: {image: {wbreakpoints: "320;768;960;1920"}}

gravity=face と組み合わせたとき、検出した顔にどれだけ寄せてトリミングするかを指定します。有効範囲は 0.0（背景をできるだけ多く含める）から 1.0（顔にできるだけ寄せてトリミングする）です。デフォルトは 0 です。

zoom=0.1

cf: {image: {zoom: 0.5}}

理想的には、画像サイズはページ上の表示サイズと一致させてください。サムネイルに <img width="200" …> のようなマークアップがある場合は、画像を width=200 にリサイズします。

レスポンシブ画像を配信する には、HTML の srcset 属性を使い、ブラウザーが最適なサイズを選べるようにできます。<img srcset> マークアップを使えず、最大サイズをハードコードする必要がある場合、Cloudflare は次のサイズを推奨します。

• デスクトップブラウザーは最大 1920 ピクセル。
• タブレットは最大 960 ピクセル。
• 携帯電話は最大 640 ピクセル。

たとえば fit=scale-down,width=1920 は最大サイズを 1920px にし、不要な拡大を防ぎます。

端末種別は、Cache Rule で CF-Device-Type ヘッダーを有効にすると検出できます。

Images で最適化すると、元画像はオリジンサーバーから取得され、通常の HTTP キャッシュルールや Cache-Control ヘッダーなどに従ってキャッシュされます。サイズの異なる複数の画像リクエストは、キャッシュ済みの元画像を再利用しやすく、オリジンサーバーからの追加転送を抑えられます。

オリジン画像に Custom Cache Keys を使うと、オリジン画像がキャッシュされず、オリジンへの呼び出しが増えることがあります。

最適化済み画像は、リサイズ元の画像と同じキャッシュルールに従います。ただし最小キャッシュ時間は 1 時間です。より頻繁に更新する必要がある場合は、Cache-Control ヘッダーに must-revalidate を追加します。Images サービスはキャッシュの再検証をサポートしているため、Etag ヘッダー付きで画像を配信することを推奨します。詳細は Cache のドキュメント を参照してください。

Cloudflare は、最適化済み画像の個別パージをサポートしていません。/cdn-cgi/ で始まる URL はパージできません。ただし、元画像の URL をパージすると、その最適化済みバージョンもすべてパージされます。