Official client SDKs

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

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

// Simple URL
spronta.url("photo.jpg", { width: 800, gravity: "face" });

// Responsive srcset
spronta.srcset("hero.jpg", { widths: [640, 1280, 1920] });

// Signed URL (with expiration)
await spronta.signedUrl("photo.jpg", { width: 800 }, 3600);

// Cloudinary-style path URL
spronta.pathUrl("photo.jpg", { width: 800, format: "webp" });
// → /my-project/w_800,f_webp/photo.jpg

import { SprontaProvider, SprontaImage } from "@spronta/images-react";

// Wrap your app once
<SprontaProvider client={spronta}>
  <App />
</SprontaProvider>

// Use anywhere — automatic srcset, blurhash, lazy loading
<SprontaImage
  path="hero.jpg"
  alt="Hero image"
  transforms={{ gravity: "auto", format: "webp" }}
  widths={[640, 1280, 1920]}
  blurhash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
  width={1920}
  height={1080}
/>

// Option 1: Drop-in component
import { SprontaNextImage } from "@spronta/images-next";

<SprontaNextImage
  config={sprontaConfig}
  path="hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  blurhash="LEHV6nWB2yk8pyo0adR*"
  priority
/>

// Option 2: Custom loader for next/image
// spronta-loader.ts
import { createSprontaLoader } from "@spronta/images-next";

export default createSprontaLoader({
  baseUrl: "https://cdn.spronta.com",
  project: "my-project",
  defaults: { quality: "medium" },
});