Cloudflare Image Component

A React component that aims to take advantage of Cloudflare Image without an object storage.

Features

• Drop-in replacement for <img /> tags
• Easily create responsive images with width and DPR breakpoints
• Control how images are resized with options
• Automatically disabled during development unless explicitly enabled

Install

Requires React 19 or later.

npm i cloudflare-image

Usage

import {Image, buildImageUrl} from 'cloudflare-image'

const oldImage = <img src={'/image.png'}/>

// Replace the tag to enjoy resizing benefits from Cloudflare
const image = <Image src={'/image.png'}/>

// Enable cloudflare url during development
const enabledImage = <Image src={'/image.png'} enabled={true}/>

// Resize the image to 300px wide
const resizedImage = <Image src={'/image.png'} width={300}/>

// Responsive image with width breakpoints: 150px, 300px, 500px (largest: max width)
const responsiveImage = <Image src={'/image.png'} width={300} options={{widths: [150, 500]}}/>

// ... Optionally, specify a max width instead
const responsiveMaxWidthImage = <Image src={'/image.png'} width={300} options={{widths: [150, 500], maxWidth: 400}}/>

// Responsive image for high-density displays
const responsiveDprImage = <Image src={'/image.png'} width={300} options={{widths: [150, 500], dprs: [1, 2]}}/>

// Redirect to original image on error
const fallbackImage = <Image src={'/image.png'} options={{redirectOnError: true}}/>

// Build a Cloudflare image URL without the component
const url = buildImageUrl('/image.png', {width: 300, quality: 80})

Configuration

The component does no validation beyond typing. Please refer to the docs to ensure what you're passing into the options is valid.

Contributing

This component is used across all projects I've worked on. If you find a bug or have a feature request, please open an issue or submit a PR.

As this component is built based on the requirements across all of my projects, any feature requests outside of that scope will likely be not worked on. As such, I recommend submitting a PR if you want to add a feature that you need.