One secure API to resize, convert, and serve optimised images on-the-fly. This hero intentionally demonstrates optional blur-to-clear loading.
Hero Request Mode
Switch this Hero block between normal cache behavior and a forced fresh request.
This demo block uses:
blurPlaceholder + blurDataUrl
Hero Blur Debug Panel
Resources
Mode: How blur is fetched: cache-first or realtime.
Blur Result: Whether a blur placeholder was available.
Source: Where this result came from.
Network Request: Whether this render made a network fetch for blur.
Request Mode: Whether this render used normal cache behavior or forced fresh request.
Failure Reason: Why blur is missing (if missing).
HTTP Status: Response status code from blur request.
Duration: Blur fetch duration in milliseconds.
Start by selecting the right output format, then request the exact width for each device. Same source image, different optimized variants on demand.
Same signing core, three strategies. Each card below is a live demo using a different approach.
Signed at render time, embedded in HTML. Zero client JavaScript for image delivery.
const url = generateOptStuffUrl(
"photo.jpg",
{ width: 800, format: "avif" },
);
<Image src={url} alt="..."
fill unoptimized />Client requests a signed URL on demand. Ideal for user uploads, search results, and feeds.
const res = await fetch(
"/api/optstuff",
{
method: "POST",
body: JSON.stringify({
imageUrl: src, width,
}),
},
);
const { url } = await res.json();
Full srcSet, lazy loading, and blur placeholders — without Vercel Image Optimization charges.
<OptStuffImage
src="photo.jpg"
fill
format="webp"
quality={80}
/>From URL to optimised image in milliseconds.
Generate an HMAC-SHA256 signature in your API route. The secret key never leaves the server.
const sig = crypto
.createHmac("sha256", SECRET)
.update(path)
.digest("base64url")
.substring(0, 32);Width, quality, format, fit — everything is in the URL. OptStuff processes on-the-fly.
/api/v1/{slug}/
w_800,q_80,f_webp,
fit_cover/
{image_url}Immutable cache headers. CDNs cache at the edge — same URL, same bytes, always.
Cache-Control: public,
s-maxage=31536000,
max-age=31536000,
immutableConfigure parameters, preview the result, and get the code — all in real-time.
<OptStuffImage
src="photo.jpg"
width={640}
sizes="(max-width: 640px) 100vw, 640px"
format="webp"
quality={80}
/>
Excellent compression with broad browser support. Ideal for most web use cases.
Next-gen codec with best-in-class compression. Great for bandwidth-constrained users.
Maximum compatibility across all browsers and devices. The safe default.
Lossless compression preserving every pixel. Best for graphics and transparency.