Web サイトの画像配信を最適化することは、ユーザー体験の向上に重要です。画像はサイトのデータ量の大半を占めることが多く、ページ読み込み時間、検索エンジンの順位、配信コスト、全体性能に大きく影響します。このリファレンスアーキテクチャ図は、わかりやすく、スケーラブルで高性能な構成を案内します。画像のサイズと品質を指定するよう URL 文字列を変えるだけで、その形式を求めるユーザーへ、最適化した画像をキャッシュして配信できます。この構成に関わる Cloudflare のコンポーネントは次のとおりです。
- Cloudflare CDN ↗ - Cloudflare のグローバルネットワーク ↗ を使い、変換済み画像をキャッシュし、エンドユーザーへ高速で安定して配信します。
- Cloudflare Images ↗ - Cloudflare Images で、Cloudflare R2 などのオブジェクトストレージに保存した画像をリサイズ、最適化、変換します。変換は特定形式の URL に基づいて行われ、アプリケーション側の改修は最小限で済みます。
- Cloudflare R2 Object Storage ↗ - R2 は大量の非構造化データを保存できます。この用途では、変換元となるオリジナル画像（最高品質）の保存に使います。
- Cloudflare Transform Rules - ほかのソリューションから Cloudflare へ移行する場合、Transform Rules で別ソリューションの構文を Cloudflare 固有の構文へ URL リライトでき、移行の複雑さを下げられます。
- ユーザーリクエスト: ユーザーは画像（image.jpg）の HTTP リクエストを送ります。幅や品質などの変換は、カンマ区切りのオプション一覧として URL に直接指定します。
- キャッシュヒット: Cloudflare はユーザーに最も近い拠点でリクエストを処理します。まず、要求された画像変換がすでに Cloudflare の Cache にあるかを確認します。あれば、追加処理なしですぐにユーザーへ返します。なければ次のステップへ進みます。
- Transform Rules（任意）: ほかの画像ソリューションから移行する場合、アプリケーション層での大規模な改修を避けるため、パスとクエリ文字列をリライトする必要があることがあります。動的リライトと静的リライトの両方に対応し、動的リライトは複雑な式で多様な URL リライトをサポートします。
- キャッシュミス - R2: 要求された画像が Cloudflare の Cache にない場合、リクエストはオリジンへ送られます。この構成のオリジンは Cloudflare の R2 Object Storage です。R2 に保存するのはオリジナル画像だけです。リサイズ済みバリアントは R2 バケットに置かないため、オブジェクトのライフサイクルルールなしでも R2 の運用負荷は抑えられます。
- 画像の変換: ステップ 1 で送った、またはステップ 3 で変換した URL 構文に基づき、Cloudflare Images が画像を変換し、Cache へ送ったうえで、要求された画像をエンドユーザーへ返します。
特定形式の URL で画像をリクエストすると、変換とリサイズを簡単にできます。この節では、上の図を参照しながら、画像変換の URL 構造と各要素を説明します。
- パート 1 - Cloudflare 上の対象ドメイン名です。Cloudflare にオンボードしたゾーンで、Web サイトまたは画像を配信する場所です。例: https://www.mywebsite.com/ ↗
- パート 2 - Cloudflare 組み込みの Worker が扱う特別なパスであることを示す固定プレフィックスです。
- パート 3 - 画像向けオプションのカンマ区切り一覧です。例: width=80,quality=75
- パート 4 - オリジンサーバー上の絶対パスです。例: /uploads/image.jpg
リクエストで使う最終的な URL は次のようになります。
https://www.mywebsite.com/cdn-cgi/image/width=80,quality=75/uploads/image.jpg