Optimize Supabase Storage image URLs

Use direct ProdKit URLs in plain HTML or any JavaScript, with no package to install.

Replace an image URL

Connect a project in the dashboard to get your image endpoint, then swap the Supabase Storage base URL for it. The path and filename stay exactly the same.

Example

// Before
https://xyz.supabase.co/storage/v1/object/public/avatars/cory.png

// After
https://img.prodkit.cloud/acme/avatars/cory.png

Build URLs in JavaScript

A JavaScript helper, @prodkit-cloud/core, is coming soon. Until then, a URL is your endpoint, the path in your bucket, and query parameters, so a few lines cover it.

Example

const endpoint = "https://img.prodkit.cloud/acme"

function imageUrl(path: string, width: number) {
  return `${endpoint}/${path}?width=${width}`
}

const src = imageUrl("avatars/cory.png", 256)

const srcset = [128, 256, 384]
  .map((width) => `${imageUrl("avatars/cory.png", width)} ${width}w`)
  .join(", ")

Resize and optimize with URL parameters

Add query parameters for sizing. AVIF and WebP are negotiated automatically from the browser's Accept header.

Example

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

Crop, blur, and cut out

Crop and effect parameters are Cloudflare Images features. Each combination counts as one of the image's five included sizes.

Example

# Square avatar cropped around the face
https://img.prodkit.cloud/acme/avatars/cory.png?width=96&height=96&gravity=face

# Social card focused on the top third
https://img.prodkit.cloud/acme/covers/launch.jpg?width=1200&height=630&gravity=0.5x0.3

# Tiny blurred placeholder
https://img.prodkit.cloud/acme/covers/launch.jpg?width=32&blur=20&quality=50

# Product cutout with a transparent background (beta)
https://img.prodkit.cloud/acme/products/sneaker.jpg?width=800&background=remove

Transform parameters

Every parameter is optional. Plain HTML and any JavaScript can use them directly.

Name	Description	Values	Default
width	Maximum width in pixels, rounded up to the next standard size (641 becomes 750) so near-identical widths share one cached image. Every Next.js and SDK width is already a standard size. w works as a short alias.	1-4096	Original width
height	Maximum height in pixels. With width, the aspect ratio is kept when width rounds up. h works as a short alias.	1-4096	Original height
quality	Compression quality, rounded to the nearest of 30, 40, 50, 60, 70, 75, 80, 82, 85, 90, 95, or 100. q works as a short alias.	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 from the Accept header.	auto, avif, webp, jpeg, png	auto
dpr	Device pixel ratio for high-density screens. Multiplies width and height before rounding.	1-3	1
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, 0.5x0.25	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
background	remove cuts out the subject and makes the background transparent (beta). Served as AVIF, WebP, or PNG so transparency survives.	remove	None