Transformation フローを作成する

フローを使うと、ゾーン上のリクエストに画像最適化を自動で適用できます。

各フローは、条件付きのトリガー（例: 画像が JPEG または PNG）と、最適化パラメーター（例: AVIF へのトランスコード）を組み合わせます。

画像リクエストがフローに一致すると、Cloudflare は Images サービス経由で透過的に書き換え、最適化済みの結果を返します。

他の画像最適化サービス（Fastly など）からの移行用の事前構築フローを使うことも、独自のカスタムフローを作成することもできます。

プロバイダーフロー は、別の画像最適化サービスの画像 URL を Cloudflare に対応づける変換レイヤーです。既存の URL（プロバイダー固有のパラメーターを含む）は、変更なしでそのまま使えます。

現在、Cloudflare は Fastly Image Optimizer 向けのフローに対応しています。有効にすると、Cloudflare は Fastly のパラメーターを Cloudflare 相当のパラメーターに自動で変換します。例:

• Fastly の brightness パラメーターは -100 から 100 の範囲を受け付けますが、Cloudflare の brightness は乗数として動作します。値はそれに応じてスケールされます。
• Fastly の orient パラメーターは、Cloudflare の flip と rotate パラメーターに対応づけられます。

カスタムフロー では、画像最適化の条件とアクションを自分で定義できます。

次のような、画像を広く一貫して最適化したい場合に適しています。

• 自動フォーマット変換 — サイト全体で、画像を AVIF や WebP などの最新フォーマットにトランスコードします。
• レスポンシブなサイズ調整 — 各ユーザーのデバイスに応じて、画像を自動でリサイズします。
• ディレクトリ単位の最適化 — 特定パスの画像に一定のサイズを適用します。例: パスに /thumbnail を含む画像を 100x100 にします。

フローを設定する前に、Cloudflare ダッシュボード ↗ の Images > Transformations で、ゾーンの Transformations が有効になっていることを確認してください。

ゾーンで画像がリクエストされると、Cloudflare は設定済みのいずれかのフローの条件に一致するかを確認します。

• フローは、ダッシュボードに表示されている上から下の順で評価されます。
• リクエストが複数のフローに一致する場合、最初に一致したフローだけが実行されます。
• 一致するフローがない場合、リクエストは変更されずにオリジンへ渡されます。
• 優先度を制御するには、ダッシュボードでフローの順序を変更できます。

リクエストがフローの条件に一致すると、Cloudflare は URL を書き換え、指定したパラメーター付きで Images サービスを経由させます。

• カスタムフローは、対応している画像拡張子 のリクエストにだけ反応します。HTML ページ、CSS ファイル、その他の非画像は影響を受けません。
• プロバイダーフローは、プロバイダー固有の最適化パラメーターに基づいてリクエストを評価します。たとえば Fastly のプロバイダーフローは、リクエストに ?width、?height、?fit などのパラメーターが含まれる場合にだけ反応します。Cloudflare は認識できないパラメーターを無視します。

リクエストのライフサイクルでは、フローは標準の HTTP リダイレクトルール の後に評価されます。

• 既存の URL 書き換えやリダイレクトルールは、Images がリクエストを評価する前に適用されます。一致の動作に影響する場合があります。
• フローにはループ防止が組み込まれています。リクエストがすでに Images サービスから来ている場合、そのサブリクエストではフローは再実行されません。

現在、Cloudflare は Fastly Image Optimizer からの移行用フローに対応しています。

プロバイダーフローを追加する手順は次のとおりです。

1. Cloudflare ダッシュボード ↗ にログインし、アカウントを選択します。
2. Images > Transformations を開き、ゾーンを選択します。
3. Automation タブを選択し、Add provider flow を選択します。
4. プロバイダーとして Fastly を選びます。
5. フローを Save します。

Cloudflare ダッシュボードで Images > Transformations ↗ を開き、カスタムフローを設定するゾーンを選択します。

Automation タブを開き、Add custom flow を選択すると、フローを設定するサイドパネルが開きます。

カスタムフローは、受信リクエストがフローに設定したすべての条件に一致したときに実行されます。

• File extension — すべての画像形式、または JPEG、PNG、WebP など特定の拡張子のリクエストに一致します。
• URL path — URL パスが指定したパターン（/images/* や /assets/thumbnails/* など）に一致するリクエストに一致します。
• Query parameter — クエリ文字列に指定したパラメーター（orient など）が含まれるリクエストに一致します。

次に、フローが実行されたときに適用する最適化パラメーターを定義します。

1 つのフローに複数のアクションを適用できます。利用できるパラメーターの一覧は 機能 を参照してください。

多くの用途で重要なパラメーターは次のとおりです。

format=auto を設定すると、リクエスト元のブラウザーに対して最も効率的な形式（AVIF、WebP など）で画像を自動配信します。

ブラウザーが AVIF に対応していない場合、Cloudflare は WebP または標準形式にフォールバックします。

format を参照してください。

出力画像の圧縮品質を制御します。次のいずれかを指定できます。

• 1（低品質、小さいファイルサイズ）から 100（高品質、大きいファイルサイズ）までの 固定値。
• 知覚品質レベル: high、medium-high、medium-low、low。

quality を参照してください。

Client Hints で低速接続が検出されたときに、quality を上書きします。quality と同じ固定値または知覚品質レベルを受け付けます。高速接続のユーザーには影響せず、低速ネットワークのユーザーには低品質（より小さい）画像を配信します。

slow-connection-quality を参照してください。

width=auto を設定すると、リクエスト元のデバイスに応じて画像サイズを自動調整します。

Cloudflare は、ブラウザーが送る Client Hints か、フォールバックとして User-Agent 検出を使って最適な幅を決めます。

次のサブパラメーターで width=auto の動作を調整できます。

width=auto の動作については、レスポンシブ画像の配信 を参照してください。

サイドパネルで Save を選択してカスタムフローを追加し、フロー一覧で Save を選択してフローを有効にします。