Variants

Source: src/Cloudflare/Cache/Variants.ts

The Variants cache setting of a Cloudflare zone (/zones/{zone_id}/cache/variants).

Variants lets a zone cache and serve multiple content types for the same URL — e.g. serve image/webp to browsers that accept it for a .jpeg URL — which is the setting behind “Serve WebP/AVIF to supported clients” workflows (typically combined with an image-resizing origin or worker).

Unlike most zone cache settings, Variants has true create/delete semantics: the setting does not exist until it is first written (reads return a typed VariantsNotConfigured error), and DELETE removes it entirely, restoring the zone’s default behavior. This resource therefore creates the setting on first deploy and deletes it on destroy.

Only one Variants resource per zone makes sense — the setting is a zone singleton, and two instances managing the same zone would fight over it.

Managing Variants

Serve WebP for JPEG URLs

const zone = yield* Cloudflare.Zone("Site", { name: "example.com" });

yield* Cloudflare.Variants("ImageVariants", {
  zoneId: zone.zoneId,
  jpeg: ["image/webp"],
  jpg: ["image/webp"],
});

Allow WebP and AVIF for all common image extensions

yield* Cloudflare.Variants("ImageVariants", {
  zoneId: zone.zoneId,
  jpeg: ["image/webp", "image/avif"],
  jpg: ["image/webp", "image/avif"],
  png: ["image/webp", "image/avif"],
  gif: ["image/webp", "image/avif"],
});