@spronta/images

Core URL builder, signing, and blurhash utilities for the Spronta image CDN.

Zero dependencies. Works in Node.js, browsers, Deno, Bun, and Cloudflare Workers.

Install

npm install @spronta/images

Quick start

import { Spronta } from "@spronta/images";

const spronta = new Spronta({
  baseUrl: "https://cdn.spronta.com",
  project: "my-project",
});

// Generate a URL
const url = spronta.url("hero.jpg", { width: 800, format: "auto", quality: "medium" });
// → https://cdn.spronta.com/my-project/hero.jpg?w=800&f=auto&q=medium

// Generate responsive srcset
const { src, srcset, sizes } = spronta.srcset("photo.jpg", {
  widths: [400, 800, 1200],
  sizes: "(max-width: 768px) 100vw, 50vw",
});

Signed URLs

const spronta = new Spronta({
  baseUrl: "https://cdn.spronta.com",
  project: "my-project",
  signingSecret: "spronta_sign_...",
});

const url = await spronta.signedUrl("private.jpg", {
  width: 800,
  expiresIn: 3600, // 1 hour
});

Blurhash

import { decodeBlurhash, blurhashToCssUrl, blurhashToColor } from "@spronta/images";

// Decode to RGBA pixels
const pixels = decodeBlurhash("LEHV6nWB2y", 32, 32);

// Get a CSS background (canvas data URL in browser, solid color in SSR)
const cssUrl = blurhashToCssUrl("LEHV6nWB2y", 32, 32);

// Extract average color
const hex = blurhashToColor("LEHV6nWB2y"); // → "#a4c3b2"

Transform options

| Option | Type | Description | |--------|------|-------------| | width | number | Output width (1–8192) | | height | number | Output height (1–8192) | | fit | string | cover, contain, fill, scale-down, crop, pad | | format | string | auto, jpeg, png, webp, avif, jxl | | quality | number | string | 1–100 or high, medium, low | | gravity | string | auto, face, center, position keywords | | blur | number | Gaussian blur (1–250) | | sharpen | number | Unsharp mask (0–10) | | radius | number | "max" | Corner radius | | rotate | number | 90, 180, 270 | | flip | string | h, v | | preset | string | Named transform preset |

See full parameter reference for all options.

Framework integrations

• React: @spronta/images-react
• Next.js: @spronta/images-next

License

MIT