> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convertly.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript Image CDN SDK

> Build Convertly Image CDN URLs and responsive srcset values in JavaScript, TypeScript, HTML, and any web framework.

Use the zero-dependency core package in browsers, Node.js, edge runtimes, or frameworks without a dedicated adapter.

```bash theme={"system"}
npm install @convertly-sh/image
```

```ts theme={"system"}
import { createConvertlyCdn } from "@convertly-sh/image";

const cdn = createConvertlyCdn({
  namespace: process.env.PUBLIC_CONVERTLY_CDN_NAMESPACE!,
});

const src = cdn.origin("products", "hero.jpg", {
  w: 1200,
  h: 800,
  fit: "cover",
  format: "auto",
});

const srcset = cdn.originSrcset("products", "hero.jpg", {
  widths: [400, 800, 1200, 1600],
});
```

```html theme={"system"}
<img src="{src}" sizes="100vw" alt="Featured product" />
```

Use `cdn.url(fileId, transforms)` and `cdn.srcset(fileId, options)` for Convertly Storage files.

## Responsive width defaults

`defaultWidths(baseWidth)` returns a practical responsive width list capped at 4,000 pixels and twice the requested base width.

```ts theme={"system"}
import { defaultWidths } from "@convertly-sh/image";

defaultWidths(1200);
// [320, 480, 640, 768, 960, 1200, 1440, 1920, 2400]
```