Docs

Quickstart and reference.

Point Refract at your origin, request a transform as a URL, and automate it with the SDK.

https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80

Single matte studio object on a pale seamless surface

Quickstart

Three steps to your first transform.

1

Create an API key and connect your image origin.

Refract fetches originals from your origin on demand and caches them at the edge. Nothing is re-uploaded and nothing is stored permanently.

A source image served from an existing origin

2

Request your first transform.

Append parameters to the source path. This asks for a 1200px-wide render, format negotiated from the Accept header, at quality 80.

https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80

3

Automate with the SDK.

Build the same URL programmatically with @refract/js.

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

Reference

Ten parameters.

Chain any of these on the source path. fm, q, and dpr are negotiated server-side.

Parameter	Accepted values	Description
w	integer px	Width, in pixels.
h	integer px	Height, in pixels.
fit	`cover`, `contain`, `fill`, `crop`	Resize mode.
fm	`jpeg`, `png`, `webp`, `avif`, `auto` Negotiated	Output format. `auto` negotiates AVIF, then WebP, then JPEG from the request Accept header.
q	1–100, default 75 Negotiated	Quality.
dpr	1–3 Negotiated	Device pixel ratio.
crop	`smart`, `center`, `edges`	Crop strategy. `smart` keeps subjects in frame.
rot	`90`, `180`, `270`	Rotation, in degrees.
blur	0–100	Gaussian blur.
bg	hex color	Background fill for `fit=contain`.

Caching & limits

Cached by default.

50/s

Rate limit, per key

30 days

Edge cache window

Instant

Purge by URL or tag

Pick a plan and start transforming.

Start building