> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flow-board.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> Use Image for screenshots, illustrations, logos, and static visual storytelling.

## What it is

**Image** displays a static visual on the screen.

## What it's best for

Use it when a still visual can explain the product, add credibility, or reinforce the message faster than more copy.

## When to use it

* Product screenshots
* Lifestyle visuals
* Brand logos
* Illustrations that support onboarding education

## When not to use it

* Do not use large images that push the main action below the fold without a reason.
* Do not add images that repeat the same message already communicated by text.

## How to add it in the dashboard

1. Open the screen in the dashboard.
2. Add **Image** from the **Components panel**.
3. Select the image on the **canvas**.
4. In the **properties panel**, choose the image source and set the fit and size.
5. Review how the image crops on the canvas before finalizing the layout.

## Key parameters

| Parameter          | What it changes                        | When to adjust it                                                            |
| ------------------ | -------------------------------------- | ---------------------------------------------------------------------------- |
| Source             | Chooses where the image comes from     | Use it when switching between library assets and hosted images               |
| Image source field | Sets which image appears               | Change it when you update the visual message                                 |
| Width              | Controls how wide the image appears    | Use it when the image should feel more dominant or more compact              |
| Height             | Controls how tall the image appears    | Use it to preserve balance with surrounding copy                             |
| Fit                | Controls how the image fills its frame | Change it when the image is cropping too aggressively or leaving empty space |
| Margin             | Adds space around the image            | Use it to prevent the image from crowding nearby elements                    |

## Example use cases

* A product screenshot that previews a feature before account creation
* A trust-building customer logo strip near a trial CTA
* A lifestyle image that sets the emotional tone of a welcome screen

## Best practices

* Choose visuals that support the business message, not just fill space.
* Keep important parts of the image visible after cropping.
* Use screenshots when you want clarity and illustrations when you want mood.

## Common mistakes

* Using images with weak contrast against the rest of the screen
* Letting the image compete with the main call to action
* Choosing decorative visuals that do not help users decide

## Related components

* [Lottie](/components/lottie)
* [Text](/components/text)
* [Positioned](/components/positioned)
* [Stack](/components/stack)