React image optimization for Supabase Storage

The @prodkit-cloud/react package wraps the URL API in an Image component with automatic srcset, lazy loading, and format negotiation. Works with Vite, CRA, Remix, or any React setup.

SDK coming soon

@prodkit-cloud/react isn't published yet, so the guides below skip the install step. Until it is, build image URLs from your endpoint with URL parameters. They work in any React app with no package:

URL API

<img
  src="https://img.prodkit.cloud/acme/avatars/cory.png?width=256"
  width={128}
  height={128}
  alt="Avatar"
  loading="lazy"
/>

Configure the provider

Wrap your app in ProdKitProvider with your project slug from the dashboard. Every Image below it resolves paths against your endpoint.

Example

import { ProdKitProvider } from "@prodkit-cloud/react"

createRoot(document.getElementById("root")!).render(
  <ProdKitProvider project="acme">
    <App />
  </ProdKitProvider>,
)

Render an image

Pass props instead of query parameters. The component generates srcset variants, sets loading="lazy" by default, and reserves layout space from width and height.

Example

import { Image } from "@prodkit-cloud/react"

export function Avatar({ avatar }: { avatar: string }) {
  return <Image src={avatar} width={128} height={128} alt="Avatar" />
}

Crop to faces and remove backgrounds

Cloudflare Images finds faces and subjects for you. gravity="face" keeps faces in frame when cropping, and removeBackground (beta) returns a transparent cutout. Each combination of options counts as one of the image's five included sizes.

Example

<Image src={avatar} width={96} height={96} gravity="face" zoom={0.6} alt="Avatar" />

<Image src="products/sneaker.jpg" width={800} removeBackground alt="Sneaker" />

Blur-up placeholders

placeholder="blur" paints a tiny blurred version of the image (32px wide, blurred by Cloudflare Images) behind it until the full image loads, so layouts never flash empty boxes.

Example

<Image src="covers/launch.jpg" width={1200} height={630} placeholder="blur" alt="Launch cover" />

Migrate existing Supabase URLs

Image accepts full Supabase Storage URLs and rewrites them to your ProdKit endpoint, so you can migrate one component at a time.

Example

<Image
  src="https://xyz.supabase.co/storage/v1/object/public/avatars/cory.png"
  width={128}
  height={128}
  alt="Avatar"
/>

Image props

Every prop except src, project, and width is optional. buildImageUrl and buildSrcSet are available for custom components.

Name	Description	Values	Default
src	Image path within your project, or a full Supabase Storage URL to rewrite.	string	Required
project	Project slug from the dashboard. Can be passed through ProdKitProvider.	string	Required
imageBaseUrl	Custom image service base URL for self-hosted or preview environments.	absolute URL	https://img.prodkit.cloud
width	Rendered width in CSS pixels. Also caps the generated srcset variants.	1-4096	Required
height	Rendered height in CSS pixels.	1-4096	Auto from aspect ratio
quality	Compression quality.	1-100	82
fit	How the image fills the requested dimensions.	scale-down, contain, cover, crop, pad	scale-down
format	Output format. auto negotiates AVIF or WebP per browser.	auto, avif, webp, jpeg, png	auto
gravity	Where cover and crop fits keep the image: face (detected faces), auto (the most interesting region), a side, or a focal point XxY from 0 to 1. Sets fit=cover unless you choose a fit.	"auto", "face", "top", "bottom", "left", "right", { x, y }	Center
zoom	With gravity=face, how tightly to crop around faces, from 0 (loose) to 1 (tight).	0-1	None
blur	Blur radius, rounded to a standard level. With a small width, makes a lightweight placeholder.	1-250	None
sharpen	Sharpening strength. 1 suits most downscaled images.	0-10	None
removeBackground	Cuts out the subject with a transparent background (beta).	boolean	false
placeholder	blur shows a tiny blurred version of the image until it loads, generated by ProdKit (no blurDataURL needed). It counts as one of the image's sizes.	blur, empty	empty