> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://katalyz.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Image widget

Use the **Image** widget for any visual — product screenshots, team photos, architecture diagrams.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-16-at-17434_139brd5.png =677xauto)
## Comment l'ajouter

## How to add

1. On the **floating build bar** at the bottom of the editor, locate the widget — in the primary widgets row, or under the **⌄ All widgets** popover if it's not there.
2. Drag the **Image** widget onto the target section.
3. Upload a file (from your computer or the Content library) or paste a URL.
4. Configure layout and captions from the selection pill (see below).

Supported formats: PNG, JPG, GIF, WebP.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/4/8/554891f22af0b400/screenshot-2026-06-16-at-17432_1hyiixp.png =467xauto)

## The selection pill — image controls

Click the image to select it. The pill above shows controls specific to the Image widget, left to right:

1. **Size** — dropdown with **Small / Medium / Large**.
2. **🌙 Dark mode (captions)** — toggle. Flips the caption block to a dark background with light text. Useful over light sections for contrast.
3. **Edit resource** (sliders icon) — opens the **edit popup** with the image's title, captions, and the **Replace image** action (see below).
4. **Replace image** (refresh icon) — shortcut to swap the file without opening the full edit popup. Caption content and design settings are preserved.
5. **Design** (paintbrush icon) — opens the contextual Design panel (Layout & corners / Spacing / Background / Border / Effects).
6. **Expand on click** (diagonal arrows icon) — toggle. When on, clicking the image in the rendered room opens the fullscreen viewer. Off = the image stays inline, non-clickable.
7. **⋮ More** — Edit resource (same as the sliders icon) · **Duplicate** · **Delete**.

## Size — Small / Medium / Large

Size controls how the image and its captions are arranged relative to each other — not a fixed width. The widget can still be freely resized afterwards:

- **Small** — the most compact arrangement. The actual image is **not** shown — only the **file-type icon** sits alongside the captions. Good for a one-line reference in a list.
- **Medium** — a small preview of the image on one side, captions on the other (side-by-side).
- **Large** — the image takes the lead, with captions stacked below it.

> **Note:** when the image is **Small or Medium**, the **title caption is always displayed** — regardless of the Title toggle. The toggle only controls display when the image is sized **Large**.

## Edit resource — captions and content

Open via the sliders icon on the pill (or the same item in the ⋮ More menu). This popup is where the image's caption content and replacement live:

- **Name** — the image's **title** (shown as the Title caption when displayed)
- **Subtitle** — a short secondary line under the title
- **Quote** — a highlighted quote block
- **Author** — name shown under the quote
- **Author avatar** — uploaded image shown next to the author name
- **Replace image** — button to swap the file without losing your caption content or design settings

## Single image per widget

One widget = one image. For a gallery or comparison, add multiple Image widgets side-by-side (the section's Compaction setting controls the spacing).

## Replacing the image later — preserve the design

When swapping content for a new deal (or updating a template), **replace the image file inside the existing widget** instead of deleting the widget and adding a new one. Why:

- All **design settings** — size, padding, radius, background, border, shadow — stay intact.
- All **caption content** (title, description, quote, author) stays unless you change it.
- You save time + your room stays visually consistent.

To replace: select the image, then click the **refresh** icon on the pill (or **Edit resource → Replace image** inside the popup) → upload / pick the new file.

## Image sources

- **Upload from your computer** — simplest
- **Content library** — reuse an image across many rooms (see [Adding assets to the library](https://katalyz.crisp.help/en/article/adding-assets-to-the-library-16i8fyp/))
- **External URL** — embed from a public URL

## Best practices

- **High-resolution images** — min 1200px wide for Large displays
- **Optimize file size** — large images slow load; under 500 KB is ideal
- **Consistent style** — don't mix cartoon illustrations with photographic screenshots in the same room

## Related articles
- [Introduction to widgets](https://katalyz.crisp.help/en/article/introduction-to-widgets-skwh2f/)
- [Text widget](https://katalyz.crisp.help/en/article/text-widget-1mq1wzl/)
- [Adding assets to the library](https://katalyz.crisp.help/en/article/adding-assets-to-the-library-16i8fyp/)