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

# React Image CDN SDK

> Use the Convertly React image component for responsive images, automatic formats, smart crops, and CDN delivery.

Install the package and wrap your image tree with `ConvertlyCdnProvider`.

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

```tsx theme={"system"}
import { ConvertlyCdnProvider, ConvertlyImage } from "@convertly-sh/image/react";

export function ProductHero() {
  return (
    <ConvertlyCdnProvider namespace={import.meta.env.VITE_CONVERTLY_CDN_NAMESPACE}>
      <ConvertlyImage
        origin="products"
        src="hero.jpg"
        width={1200}
        height={800}
        sizes="(min-width: 768px) 50vw, 100vw"
        alt="Featured product"
      />
    </ConvertlyCdnProvider>
  );
}
```

The component renders a native `<img>` with generated `src`, `srcSet`, and `sizes` values. It accepts standard image props plus Convertly transforms such as `q`, `fit`, `gravity`, `format`, `trim`, and `preset`.

Pass a Convertly Storage file ID as `src`, or combine an origin source slug with a path as shown above. Without a provider, pass `namespace` directly to each component.

<Card title="Image transform reference" icon="sliders" href="/docs/image-cdn/transforms">
  Explore resize, crop, quality, format, overlays, privacy, and AI transform options.
</Card>