コンテンツにスキップ

Cloudflareの画像リサイズとR2を使用した画像配信の最適化

はじめに

ウェブサイトの画像配信を最適化することは、ユーザーエクスペリエンスを向上させるために重要です。画像はしばしばウェブサイトのデータの最大部分を占めるため、ページの読み込み時間、検索エンジンのランキング、配信コスト、全体的なパフォーマンスに大きな影響を与えます。このリファレンスアーキテクチャダイアグラムは、シンプルでスケーラブル、高パフォーマンスなソリューションを提供します。URL文字列を調整して画像のサイズと品質を指定するだけで、最適化された画像をその形式を要求するユーザーにキャッシュして配信できます。以下は、このソリューションに関与するCloudflareのコンポーネントです。

  • Cloudflare CDN ↗ - Cloudflareのグローバルネットワーク ↗を活用して、変換された画像をキャッシュし、エンドユーザーに迅速かつ信頼性の高い配信を行います。
  • Cloudflare Images ↗ - Cloudflare Imagesを利用して、Cloudflare R2のようなオブジェクトストレージソリューションに保存された画像をリサイズ、最適化、変換します。変換は、アプリケーションのサポートに最小限のリファクタリングを必要とする特定の形式のURLに基づいて行われます。
  • Cloudflare R2オブジェクトストレージ ↗ - R2は、ユーザーが大量の非構造化データを保存できるようにし、このユースケースでは変換用の元の画像（最高品質）を保存するために使用されます。
  • Cloudflare Transform Rules - 他のソリューションからCloudflareに移行する場合、Transform Rulesを使用して、他のソリューションの構文からCloudflare特有の構文にURLをリライトすることができ、移行の複雑さを軽減します。

Cloudflareの画像リサイズとR2を使用した画像配信

図1: Cloudflareの画像リサイズとR2

  1. ユーザーリクエスト: ユーザーは画像（image.jpg）に対してHTTPリクエストを送信し、URL内に幅や品質などの変換をカンマ区切りのオプションリストとして指定します。
  2. キャッシュヒット: Cloudflareは、ユーザーに最も近いポイントオブプレゼンスでリクエストを処理します。最初に、要求された画像変換がすでにCloudflareのキャッシュに存在するかどうかを確認します。存在する場合、画像はすぐにユーザーに返され、さらなる処理の必要がなくなります。存在しない場合、リクエストは次のステップに進みます。
  3. Transform Rules（オプション）: 他の画像ソリューションから移行する場合、URLパスとクエリ文字列をリライトする必要があるかもしれません。これにより、移行を支援するためにアプリケーションレベルでの複雑なリファクタリングを回避できます。動的および静的リライトの両方がサポートされており、動的リライトは複雑な式をサポートして多くのURLリライトを実現します。
  4. キャッシュミス - R2: 要求された画像がCloudflareのキャッシュに存在しない場合、リクエストはオリジンに送信されます。このシナリオでは、CloudflareのR2オブジェクトストレージプラットフォームがオリジンとなります。R2には元の画像のみが保存され、リサイズされたバリアントはR2バケットに保存されないため、オブジェクトライフサイクルルールなしでR2を運用することが容易になります。
  5. 画像変換: ステップ1で送信されたURL構文またはステップ3で変換されたURLに基づいて、Cloudflare Imagesが画像を変換し、キャッシュに送信した後、要求された画像をエンドユーザーに返します。

画像リサイズURL構文リファレンス

特定の形式のURLを通じてリクエストすることで、画像を簡単に変換およびリサイズできます。このセクションでは、画像変換のためのURL構造を説明し、ダイアグラムを参照しながら各URLコンポーネントを詳細に説明します。

  • パート1 - Cloudflare上の特定のドメイン名、これはCloudflareにオンボードしたゾーンであり、あなたのウェブサイトや画像が提供される場所です。例: https://www.mywebsite.com/ ↗
  • パート2 - Cloudflareの組み込みワーカーによって処理される特別なパスであることを識別する固定プレフィックス。
  • パート3 - 画像のオプションのカンマ区切りリスト、例: width=80,quality=75
  • パート4 - オリジンサーバー上の絶対パス。例: /uploads/image.jpg

リクエストで使用される最終的なURLは次のようになります：

https://www.mywebsite.com/cdn-cgi/image/width=80,quality=75/uploads/image.jpg

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings