コンテンツにスキップ

画像のバリエーション

Varyは、リクエストを送信するブラウザに応じて同じコンテンツのバリエーションを提供できるようにするHTTPレスポンスヘッダーです。

Cloudflareはブラウザとオリジンの間に位置します。Cloudflareがオリジンのレスポンスを受け取ると、特定の画像バリエーションがキャッシュされ、同じ画像の好みを持つブラウザからの後続のリクエストはキャッシュから提供されます。これは、同じアセットに対して複数の画像バリエーションを提供することが異なるキャッシュエントリを作成することを意味します。

画像のVaryは、リクエストのAcceptヘッダーを解析することによってコンテンツネゴシエーションプロセスを削減し、正しいコンテンツをブラウザに提供するためにオリジンに送信されます。

画像のバリエーションは、Pro、Business、およびEnterpriseの顧客向けに利用可能です。

利用可能性

Free Pro Business Enterprise

Availability

No

Yes

Yes

Yes

ファイル拡張子

オリジンサーバーがVary: Acceptレスポンスヘッダーを送信する場合、以下のファイル拡張子で画像のバリエーションを使用できます。オリジンサーバーがVary: Acceptを送信しても、設定されたバリエーションを提供しない場合、レスポンスはキャッシュされず、レスポンスヘッダーのキャッシュステータスにBYPASSと表示されます。さらに、オリジンが各拡張子に対して提供するバリエーションタイプのリストは、Cloudflareがオリジンサーバーに連絡することなくどのバリエーションを提供するかを決定できるように構成する必要があります。

バリエーションが有効なファイル拡張子
  • .avif
  • .bmp
  • .gif
  • .jpg
  • .jpeg
  • .jp2
  • .png
  • .tif
  • .tiff
  • .webp

画像のバリエーションを有効にする

画像のバリエーションは、CloudflareのAPIを通じてバリエーションルールを作成することで有効になります。以下の例では、.jpegおよび.jpg拡張子のJPEG、WebP、およびAVIFバリエーションを提供する方法を学びます。

バリエーションルールを作成する

Terminal window
curl --request PATCH \
"https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
--header "X-Auth-Email: <EMAIL>" \
--header "X-Auth-Key: <API_KEY>" \
--header "Content-Type: application/json" \
--data '{"value":{"jpeg":["image/webp","image/avif"],"jpg":["image/webp","image/avif"]}}'

WebPバリエーションのみを許可するように変更する

Terminal window
curl --request PATCH \
"https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
--header "X-Auth-Email: <EMAIL>" \
--header "X-Auth-Key: <API_KEY>" \
--header "Content-Type: application/json" \
--data '{"value":{"jpeg":["image/webp"],"jpg":["image/webp"]}}'

ルールを削除する

Terminal window
curl --request DELETE \
"https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
--header "X-Auth-Email: <EMAIL>" \
--header "X-Auth-Key: <API_KEY>"

ルールを取得する

Terminal window
curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
--header "X-Auth-Email: <EMAIL>" \
--header "X-Auth-Key: <API_KEY>"

バリエーション画像のパージについて詳しくは、バリエーション画像のパージを参照してください。

制限事項

  • 画像のバリエーションが機能するためには、画像のURLにパス内にファイル拡張子が含まれている必要があり、クエリ文字列には含まれていない必要があります。例えば、URL https://example.com/image.jpgは互換性がありますが、https://example.com/index.php?file=image.jpgは互換性がありません。
  • HTTPクライアントがAcceptヘッダーを送信しない場合、またはAccept: */*ヘッダーを送信する場合、オリジンはURL内のファイル拡張子に一致する画像タイプを返す必要があります。そうでない場合、HTTPレスポンスヘッダーにCF-Cache-Status: BYPASSが表示されます。
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings