Cloudflare は、Images を使ってメディアアプリケーションを構築し、スケールするためのプラットフォームを提供します。このページでは、次の質問に答えます。
- 画像を最適化する理由は何ですか？
- Images の始め方は？
- 保存先は Images と R2 のどちらにすべきですか？
元の解像度と形式のまま画像を読み込むと、アプリのパフォーマンスのボトルネックになりやすくなります。モバイルでは特に顕著です。
一方、同じ画像の複数バージョンを作成して保存すると、複雑さとオーバーヘッドが増え、ストレージ費用もかかります。
大量のメディアを配信する場合、画像最適化には次の利点があります。
- インフラの簡素化 — リクエスト時に最適化済みバージョンを動的に生成することで、ワークフローを簡素化し、インフラ費用を抑えられます。
- ファイルサイズの削減 — AVIF や WebP などの新しい形式で自動配信します。ページ速度が上がり、帯域も減ります。
- レスポンシブなサイズ調整 — 保存している同じ元画像から、正方形のサムネイルから横長のバナーまで、用途に合わせて切り抜きとリサイズができます。
- 視覚効果 — ぼかし、オーバーレイ、背景塗りつぶしなどをエッジで適用できます。
画像の保存場所に応じて、Images の使い方は 2 通りあります。
画像は自前のオリジン、R2、または任意のストレージプロバイダーに置いたままにできます。Cloudflare が元画像を取得し、エッジで最適化を適用して、最適化済み画像をキャッシュします。
オリジンの許可リスト を定義すると、ゾーン上で変換できるソース画像を制御できます。
始めるには、ゾーンで変換を有効にします。
インフラの管理なしで、画像の保存、最適化、グローバル配信ができます。
アプリの中心がユーザー投稿コンテンツなら、Direct Creator Upload API を使って、ユーザーから画像を安全に直接受け取れます。
始めるには、事前定義バリアント を設定し、ホスト済み画像の配信方法を構成します。
R2 に保存し、変換に Images を使うのは、独自の画像パイプラインを作りたい場合や、バケット単位のアクセス管理 や オブジェクトライフサイクルルール など、ストレージを細かく制御したい場合です。画像最適化としては、一般的に最も費用対効果が高い方法です。
Images に保存するのは、設定を最小限にしたフルマネージドの解決策が欲しい場合です。組み込み機能には、共有配信ドメイン、事前定義バリアント、ストレージ上の元画像を更新したときの自動キャッシュ無効化があります。
用途ごとに料金体系が異なります。詳しくは 料金 を参照してください。