# Image

Image elements hold raster art (photos, screenshots, illustrations). Click **Image** in the top toolbar to insert.

## Adding an image

Three sources, all available from the inspector once an image element is selected:

- **Upload** — drag a file onto the inspector or click "Upload." Accepted formats: PNG, JPG, WebP, GIF, SVG. Files are stored in your org's Supabase bucket and a signed URL goes into `src`.
- **Pick from existing** — opens a picker showing every image previously uploaded to this deck. No re-upload, no duplicate storage.
- **Paste URL** — for hotlinked images. The inspector accepts any valid HTTPS URL.

## Auto-description for the agent

When you upload an image, the SDK automatically calls a vision API to generate a one-paragraph description. The result drops into the inspector's **Description** field. The agent uses it for context — so when the visitor asks "what's that on slide 4?", the agent knows.

You can edit the description manually. The auto-fill is a starting point, not a contract.

## Inspector

<!-- omitted: ParamsTable -->

## Fit modes

**cover (default):**

```json
{ "fit": "cover" }
```

The image fills the bounding box, cropping whichever dimension overflows. Aspect ratio is preserved. Best for photos used as a hero or background.

**contain:**

```json
{ "fit": "contain" }
```

The image scales to fit entirely inside the bounding box. The other dimension becomes empty space (transparent — falls through to whatever is behind the image). Best for product screenshots or logos.

**fill:**

```json
{ "fit": "fill" }
```

The image stretches to exactly the bounding box. Aspect ratio is **not** preserved. Use rarely.

## Schema reference

```json title="image-element.json"
{
  "type": "image",
  "position": { "x": 80, "y": 200, "w": 1100, "h": 600 },
  "src": "https://storage.acme.com/slide-images/hero.jpg",
  "alt": "Two-seater couch in a living room",
  "description": "A modern grey two-seater fabric couch in a sunlit living room with a wooden floor and tall windows.",
  "fit": "cover",
  "cornerRadius": 12
}
```

## Read next

- [Video](/docs/build/slides/elements/video) — for moving images
- [Theming](/docs/build/slides/theming) — match your image styling to deck branding