cloudflare

@srcset/cloudflare

Adapter for Cloudflare image transformations: srcset variant urls for content images, e.g. from an API or a CMS.

• 🌐 Runtime builder of loader-shaped srcset objects, isomorphic: browser and server
• 🚀 Zero configuration on a Cloudflare zone: relative urls from /cdn-cgi/image, no signing
• 🔧 Custom transformations via the processing hook, e.g. format=auto negotiation
• 🛠 Passthrough mode for local development outside of a Cloudflare zone

Install

# pnpm
pnpm add @srcset/cloudflare @srcset/runtime
# yarn
yarn add @srcset/cloudflare @srcset/runtime
# npm
npm i @srcset/cloudflare @srcset/runtime

Usage

Srcset objects for CMS images, on a Cloudflare zone:

import { Cloudflare } from '@srcset/cloudflare'

const cloudflare = new Cloudflare()
const { src, srcSet, srcMap } = cloudflare.image(photo.url, {
  width: [600, 1200],
  format: ['webp', 'jpg']
})

Format negotiation by the Accept header, instead of format variants:

const cloudflare = new Cloudflare({
  processing: ({ width }) => `width=${width},format=auto`
})

Passthrough mode - untouched source urls, e.g. for local development outside of a Cloudflare zone:

const cloudflare = new Cloudflare({
  passthrough: import.meta.env.DEV
})

Documentation

For more details, guides and API references, check out the documentation website.