# Images with DashImage

> The right size for every screen, from the CDN.

Source: https://docs.dashfordevs.com/v1/sdk/images · Topic: The dash4devs SDK · Updated: 2026-11-07

```tsx
import { DashImage } from "dash4devs/react";

<DashImage src={product.main_image} alt={product.name} width={800} />
```

`DashImage` builds a `srcset` from the image's size ladder on **cdn.dashfordevs.com**, so a phone downloads a small file and a large screen never gets less than the uploaded resolution.

-   Paths under the CDN's folders (`/content/`, `/inventory/`, `/media/`, `/sites/`) are resolved against the CDN.
-   Your site's own files (`/images/logo.svg`) stay on your site.
-   `cdnImageUrl(path)` from `dash4devs/utils` does the same for your own markup.

If you also use `next/image`, allow the CDN host:

```js
// next.config.js
images: { remotePatterns: [{ protocol: "https", hostname: "cdn.dashfordevs.com" }] }
```