Three steps to your first transform, the full ten-parameter reference, and how caching and limits behave. Everything is driven by the query string.
Create an API key and point Refract at an existing image origin. Nothing is re-uploaded — originals are fetched on demand and cached at the edge.
Append parameters to any image path. This resizes to 1200px wide, negotiates the best format, and sets quality to 80:
https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80
Build the same URL in code — the helper returns the exact query string.
import { refract } from "@refract/js";
const url = refract("hero.jpg", { width: 1200, format: "auto", quality: 80 });
// → https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80Seven run in the browser demo on the home page. fm, q, and dpr are negotiated server-side.
| Parameter | Accepts | Description |
|---|---|---|
| w | px | Output width in pixels. |
| h | px | Output height in pixels. |
| fit | cover · contain · fill · crop | Resize mode — how the image fills the target box. |
| fmNEGOTIATED | jpeg · png · webp · avif · auto | Output format. auto negotiates AVIF, WebP, then JPEG from the Accept header. |
| qNEGOTIATED | 1–100 · default 75 | Output quality. |
| dprNEGOTIATED | 1–3 | Device pixel ratio for high-density displays. |
| crop | smart · center · edges | Crop strategy. smart keeps subjects in frame. |
| rot | 90 · 180 · 270 | Rotation, in degrees. |
| blur | 0–100 | Gaussian blur.The transform this whole page is built from — the frost you see is this parameter, live. |
| bg | hex color | Background fill for fit=contain letterboxing. |
Point Refract at your origin and it fetches each original on demand, transforms it, and caches the result across the edge. Your originals are never stored permanently.
50 req/s
Per key, on every tier.
30 days
Transformed variants are cached at the edge; purge instantly by URL or tag.
Never stored
Fetched from your origin on demand, edge-cached, never held permanently.