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

# Image CDN SDKs

> Integrate the Convertly Image CDN with React, Next.js, Vue, Astro, SolidJS, Svelte, or plain JavaScript.

Ship responsive, automatically formatted images without writing CDN URLs by hand. The official `@convertly-sh/image` package provides a zero-dependency URL builder plus framework-specific adapters.

<CardGroup cols={3}>
  <Card title="React" icon="react" iconType="brands" href="/docs/image-cdn/sdk/react">
    Responsive images, a provider, and typed transform props for React apps.
  </Card>

  <Card title="Next.js" icon="n" href="/docs/image-cdn/sdk/nextjs">
    Connect `next/image` to Convertly with a custom production loader.
  </Card>

  <Card title="Vue" icon="vuejs" iconType="brands" href="/docs/image-cdn/sdk/vue">
    Add responsive CDN images to Vue 3 with a component and composable.
  </Card>

  <Card title="Astro" icon="rocket" href="/docs/image-cdn/sdk/astro">
    Build a reusable Astro image component with the core URL builder.
  </Card>

  <Card title="SolidJS" icon="shapes" href="/docs/image-cdn/sdk/solid">
    Use reactive image components and a shared CDN provider.
  </Card>

  <Card title="Svelte" icon="svelte" iconType="brands" href="/docs/image-cdn/sdk/svelte">
    Generate optimized image props for Svelte 4 and Svelte 5.
  </Card>

  <Card title="JavaScript and HTML" icon="js" iconType="brands" href="/docs/image-cdn/sdk/javascript">
    Build URLs and `srcset` values in any browser, server, or framework.
  </Card>
</CardGroup>

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

## Before you integrate

The SDK builds delivery URLs. It does not upload files or read your local project directory.

| Where the source image lives              | Required setup                                         |
| ----------------------------------------- | ------------------------------------------------------ |
| Convertly Storage                         | Upload the file and create a CDN endpoint              |
| Your site, bucket, or existing asset host | Create an origin source with its public HTTPS base URL |

Use a CDN endpoint's public URL namespace in frontend code, never a secret `cvly_...` API key. Follow the [Image CDN setup guide](/guides/image-cdn-setup) if you have not created an endpoint or origin yet.

## CDN SDK or API SDK?

Use `@convertly-sh/image` for on-the-fly image delivery, responsive `srcset` generation, automatic formats, and edge caching. Use an [API SDK](/docs/sdks) when you need to convert, compress, trim, remove backgrounds, process, or store files. Many applications use both.

<Card title="Responsive images and art direction" icon="mobile-screen-button" href="/guides/responsive-images">
  Learn when to use a framework image component, `srcset`, or `<picture>` for breakpoint-specific crops.
</Card>