1. Image Transformationとは？

Cloudflare Image Transformationは、リクエスト時に動的に画像を最適化し、サイズ変更や形式変換を行う強力なツールです。
https://developers.cloudflare.com/images/transform-images/

Transformation 機能は有償のアドオンになります
https://developers.cloudflare.com/images/pricing/

2. 今回やりたかったこと

今回の目標は、Cloudflare Image Transformationを使って、以下を実現することです：

クライアントからの画像リクエストを動的に書き換え、最適化を実行

オリジンURLを変更せずに移行

①　既存の画像URL（例: https://<your domain>/images/*）を変更せずに、Cloudflare側で画像のリサイズや効果適用などの最適化を管理。
②　Cloudflare への移行をスムーズに。
リクエストURLやオリジン構成を維持しながら、新しい仕組みにスムーズに移行

3. うまくいかない

やってみた設定

リクエストURL:

https://<your domain>/images/image1.jpg

書き換え後のリクエスト:

https://<your domain>/cdn-cgi/image/width=100,quality=75,format=auto/images/image1.jpg

上記、初期の検証では単純な条件設定でもcf-Resizedヘッダーが付与され、期待通りImage Transformationが動作しているように見えました。
しかし、実際には以下の問題が発生しました：

404エラー (err=9404)

Image Transformationが「画像がオリジンに存在しない」と判断？
実際にはオリジンに画像は存在しており、Transform Rulesの設定ミスが原因と推測しました。
レスポンスヘッダー、cf-Resized が付与されていないリクエストもあり、期待する動作が一貫しない挙動も。
そして、リクエストの動的書き換えをどう設定するか。

4. 解決策

4.1 参考にしたドキュメント

Cloudflareの公式ドキュメントを活用し、適切な条件式と動的書き換え方法を見つけました：

Dynamic Rewrite with Wildcard
https://developers.cloudflare.com/rules/transform/url-rewrite/create-dashboard/
Using Conditions in Transform Rules
https://developers.cloudflare.com/images/transform-images/serve-images-custom-paths/

wildcard_replace を利用した動的書き換え: ワイルドカードでリクエストを簡単に書き換え可能。
配列型データへの対応: ヘッダー条件には any や not を使用して柔軟に対応。

4.2 条件設定

以下の条件式を採用：Custom Filter Expression

(http.request.full_uri wildcard r"https://<your domain>/images/*")
and (not (any(http.request.headers["via"][*] contains "image-resizing")))

フルURIの使用: ホスト名を含む完全なパスで条件を設定。
再処理の防止: via ヘッダーに image-resizing が含まれている場合は、Transform Rulesをスキップ。

4.3 書き換え先の設定

書き換え先URLは以下のように設定：Dynamic

wildcard_replace(http.request.uri.path, r"/images/*", r"/cdn-cgi/image/quality=75/https://<your domain>/images/${1}")

元URLの動的書き換え: /images/* をCloudflare Image Transformation API形式に変換。
リクエストをオリジナル画像にマッピング: ${1} でキャプチャした元の画像パスを展開。

どゆこと？

再処理の発生シナリオ

初回のTransform Rules適用

クライアントが https://example.com/images/avatar_001.png にリクエストを送信。
Transform Rulesがこのリクエストを https://example.com/cdn-cgi/image/quality=75/images/avatar_001.png に書き換え。
Cloudflare Image Transformationが適用

書き換えられたURLがCloudflareのImage Transformationエンジンに送信され、画像が最適化される。
ループによる再適用

書き換え後のリクエスト（/cdn-cgi/image/...）が再びTransform Rulesの条件に一致してしまい、
Transform Rulesが再適用され、ループや認められない書き換えが発生すると考えられます。

再処理を防止する仕組み

Transform Rulesが意図せず再適用されるのを防ぐために、via ヘッダーを条件に追加します。

via ヘッダーとは？
via ヘッダーは、Cloudflareがリクエストを処理する過程で、既にどの機能を経由したかを記録します。

via ヘッダーとImage Transformation
Cloudflare Image Transformationを通過したリクエストには、自動的に以下のような情報が付与されます：

via: image-resizing

防止ロジック Transform Rulesに以下の条件を追加することで、Image Transformationを通過したリクエストを対象外とします：

not (any(http.request.headers["via"][*] contains "image-resizing"))

4.4 実際の設定例

Transform Rules設定

条件:

(http.request.full_uri wildcard r"https://dd-video-player.net/images/*")
and (not (any(http.request.headers["via"][*] contains "image-resizing")))

書き換え:

wildcard_replace(http.request.uri.path, r"/images/*", r"/cdn-cgi/image/quality=75/https://dd-video-player.net/images/${1}")

保存してデプロイ

5. 404エラーの原因

err=9404 は「オリジンに画像が存在しない」と報告しますが、実際にはURLの書き換えミスが原因。
Cloudflare Image Transformation APIの形式に正しく合わせることで解決しました。
Transform Rulesの強み
動的なURL書き換え（wildcard_replace）と条件付きルール（http.request.full_uri + any/not）を組み合わせる。

6. 応用できそうなこと

さらに高度な条件式を追加し、User-Agent でのデバイスごとの画像最適化や、特定のディレクトリのみを対象とした最適化も容易に設定可能ですね。

7. まとめ

Cloudflare Image TransformationとTransform Rulesを組み合わせることで、以下を達成できました：

URLの変更なしでのスムーズな移行。
動的URL書き換えによる画像最適化の自動化。
Cloudflare の Transform Rulesは、条件ベースの強力な設定機能を提供し、複雑な要件にも対応可能です。

オリジンURLを変更することなく、Cloudflare Image Transformationによる動的画像最適化が可能になりました。