> ## 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.

# Astro Image CDN SDK

> Build responsive Convertly Image CDN URLs and reusable optimized image components in Astro.

Astro works with the framework-agnostic URL builder, so you can create a small project-specific component.

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

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

const cdn = createConvertlyCdn({
  namespace: import.meta.env.PUBLIC_CONVERTLY_CDN_NAMESPACE,
});

const { path, width, sizes, alt } = Astro.props;
const src = cdn.origin("site", path, { w: width, format: "auto" });
const srcset = cdn.originSrcset("site", path, {
  widths: [400, 800, 1200, 1600],
});
---

<img {src} {srcset} {sizes} {alt} loading="lazy" decoding="async" />
```

Save the example as `src/components/ConvertlyImage.astro`. Create the `site` origin source before using deployed public asset paths.