Responsive image via Cloudflare Image Transformations. Generates a proper <img srcset="..." sizes="..."> using Cloudflare’s /cdn-cgi/image/ pipeline. Falls back to the original src in dev.
Basic
<CfImage src="/assets/img/test.png" alt="Hero" sizes="100vw" />
Card thumbnail (image is ~1/3 of viewport on desktop)
<CfImage
src={cover}
alt={title}
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
loading="eager"
/>
Props
| Type | Name | Description |
|---|---|---|
| string | src |
Image source path. |
| string | alt |
Alt text — required, no silent fallback. |
| string | sizes? |
CSS sizes attribute — describes the rendered image width at each breakpoint. |
| number[] | widths? |
Widths (px) to include in the srcset. |
| number | quality? |
Cloudflare output quality (0–100). |
| string | format? |
Output format passed to Cloudflare (e.g. avif, webp, auto). |
| number | sharpen? |
Cloudflare sharpen (0–10). |
| string | class? |
|
| “lazy” | “eager” | loading? |
Native loading attribute. |
| “async” | “sync” | “auto” | decoding? |
Native decoding attribute. |
Live example
