NAME — on-the-fly image transforms, optimization, and global edge delivery over your existing image origin, driven by URL parameters.
https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80Create an API key and connect your image origin. Refract points at an existing origin — there is no re-upload. Originals are fetched on demand and cached at the edge, never stored permanently.
Request your first transform. Append a query string to any image path:
https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80Automate with the SDK. The helper builds the same URL from a typed options object:
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=80
Ten chainable parameters. Seven are applied to the pixels; fm, q, and dpr are NEGOTIATED at the edge and travel in the URL.
| Name | Values | Description |
|---|---|---|
| w | integer, px | Output width. |
| h | integer, px | Output height; omit to keep the source aspect ratio. |
| fit | cover, contain, fill, crop | Resize mode. |
| fm NEGOTIATED | jpeg, png, webp, avif, auto | Output format; auto negotiates AVIF → WebP → JPEG from the Accept header. |
| q NEGOTIATED | 1–100 (default 75) | Re-encode quality. |
| dpr NEGOTIATED | 1–3 | Device pixel ratio. |
| crop | smart, center, edges | Crop strategy; smart keeps the subject in frame. |
| rot | 90, 180, 270 | Rotation, degrees clockwise. |
| blur | 0–100 | Gaussian blur radius. |
| bg | hex color | Background fill for fit=contain. |
fm=auto negotiates AVIF → WebP → JPEG from the request's Accept header, so each client receives the smallest format it can decode. Across typical libraries this averages a 62% payload reduction versus the source JPEG.
Transformed variants are served from 41 edge locations. Cached responses return at a p50 of 21 ms with a 98.6% cache hit ratio; a cold transform completes at p50 89 ms / p99 340 ms.