Refract

Read the label

Four minutes, three steps, and then it is just URLs for the rest of your life. You do not install a pipeline and you do not move your images anywhere — Refract fetches the original from the origin you already run, transforms it on request, and caches the result at the edge.

Below is the whole ingredient list, set the way a carton sets one: every accepted value written out, the one default the brief actually states printed once, and nine honest em dashes where a default was never specified — because a label that guesses is a label nobody believes again. Three of the ten are marked with an asterisk; they are done on our side, not in your browser, and the small print at the bottom says exactly what that means.

yes, the asterisk has its own paragraph. everything here does.

A blank unlabelled paper carton standing upright on a plain kitchen counter.
A blank carton. We are going to print the whole reference on the back of it.

Quickstart — three steps

Get a key, point at your origin

Create an API key and connect the image origin you already have. Nothing is uploaded and nothing is copied — Refract just needs to know where to fetch from.

Request your first transform

Append parameters to the path and ask for the image back:

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

Automate with the SDK

The same URL, built for you:

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
What's in it · all ten
Parameter Accepted values Default What it does
w positive integer, px — Width in pixels. The brief states no maximum, so neither do we — whatever you write goes into the URL exactly as written.
h positive integer, px — Height in pixels. Same deal: no invented ceiling.
fit cover · contain · fill · crop — How the image meets the width and height you asked for.
fm* jpeg · png · webp · avif · auto — Output format. auto negotiates AVIF → WebP → JPEG off your request's Accept header.
q* 1–100 75 Quality on re-encode. This is the one default the brief states, so this is the one row that is not a dash.
dpr* 1–3 — Device pixel ratio. Your browser's own number, clamped to the range.
crop smart · center · edges — Crop strategy. smart keeps the subject in frame instead of guillotining it down the middle.
rot 90 · 180 · 270 — Rotation in degrees. There is no rot=0, because the brief never minted one.
blur 0–100 — Gaussian blur, weakest to strongest.
bg hex colour, #RRGGBB — Background fill for contain. There is no preset palette, because the brief never handed us one.
The small print · caching & limits
Rate limit 50 requests / second per key · every tier
Variant cache 30 days at the edge
Purge instant · by URL or tag

You have read the label

There is nothing left to install. Create a key, append a parameter, and ask for the image back.

See pricing