Docs
Set up optimized images in five minutes
ProdKit sits in front of your Supabase Storage bucket. You keep uploading where you do today, and images are served resized, converted to AVIF or WebP, and cached on Cloudflare's network.
Quickstart
- 1
Connect your bucket
Paste your public bucket URL in the dashboard. ProdKit checks the bucket and gives you an image endpoint for the project.
- 2
Replace one URL
Swap the Supabase Storage base URL for your endpoint. Paths and filenames stay exactly the same.
- 3
Resize and ship
Add width or quality parameters to each URL. AVIF and WebP are negotiated automatically.
Replace one URL
// Before
https://xyz.supabase.co/storage/v1/object/public/avatars/cory.png
// After
https://img.prodkit.cloud/acme/avatars/cory.png?width=256Choose your platform
URL parameters
Every parameter is optional. Everything after your endpoint mirrors the path in your bucket.
| 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 |
Response headers
Check what was served, and from where, with your browser's network tab or curl -I.
| Header | Meaning | Example |
|---|---|---|
| x-prodkit-project | The project that served the request. | acme |
| x-prodkit-variant | The size actually served, after rounding: fit, width x height, and quality. | scale-down:750x-:q82 |
| x-prodkit-cache | HIT: from Cloudflare's edge cache. STORE: a size generated earlier, read back from storage. MISS: generated now by Cloudflare Images. | HIT |
| x-prodkit-limit | Present when a Free project is past its monthly limit and the response redirects to the original. | reached |
Migrate with a coding agent
Claude Code, Cursor, and Codex can do the whole migration. Give your agent the endpoint and bucket, and review the diff like any other pull request.
Prompt
Optimize every image in this project with ProdKit.
Our endpoint is https://img.prodkit.cloud/acme and our bucket is "avatars".
Find Supabase Storage image URLs, rewrite them to the endpoint,
add width parameters that match how each image is displayed,
and show me the diff before committing.