---
title: Image element
slug: image
description: How the Image element works in Personizely widgets: 2 MB uploads, Unsplash, Pexels and Giphy, alt text, object fit, and click actions and automations.
image: https://archbee-image-uploads.s3.amazonaws.com/1y1Fr-DMGy_apx7FwibyA/ORDTWfNKMXiY3ZRv0QSgP_personizely-docs-og.png
docTags: 
createdAt: 2026-10-16T20:20:32.675Z
---

The Image element shows a picture or animated GIF in a widget. You can upload your own file, paste an image URL or pick from Unsplash, Pexels and Giphy, and you can make the image clickable with the same actions and automations as a button.

**Available on:** all platforms.

## Configuration

**Settings** tab:

| Option        | What it does                                                         | Values / default                                                                                                                             |
| ------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image URL** | The image to show                                                    | Upload (2 MB max), paste a URL, or choose from Unsplash, Pexels or Giphy. Supports [dynamic text](https://docs.personizely.net/dynamic-text) |
| **Alt**       | Alternative text for screen readers and when the image fails to load | Empty by default                                                                                                                             |

**Interaction** tab:

| Option                  | What it does                          | Values / default                                                                                                                            |
| ----------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Action**              | What a click does                     | **No action** (default), **Open URL**, **Close widget**, **Go to step**, **Spin the wheel** (only with a Wheel of Fortune on the same step) |
| **Conditional actions** | Alternative actions by visitor fields | See [Actions](https://docs.personizely.net/action#conditional-actions)                                                                      |
| **Automation**          | Side effects of the click             | Shown only after you set an action                                                                                                          |

**Style** tab: border, radius, shadow, opacity, size (including **object fit** and **object position**), margin and position, with **hover** and **focus** states. Then [Device and Animation](https://docs.personizely.net/widget-elements#settings-every-element-has). New images fill the width of their container.

## Behavior details and limitations

- **Clickable images are links.** With an action set, the image is wrapped in a link, so it's keyboard-focusable. Write alt text that describes where it goes ("Shop the summer sale"), not what it shows.
- **Automations need an action.** The **Automation** section appears only once the action isn't **No action**. A click is recorded as a widget click under the same rules as [buttons](https://docs.personizely.net/button#click-tracking).
- **Images are fetched in advance.** When a widget is armed on a page, its images start downloading in the background, so they're usually ready when the widget opens.
- **Object fit** controls how the image fills a fixed width and height: **cover** crops, **contain** letterboxes. Use **object position** to choose the visible part of a cropped image.
- **Edge shapes** (curve, diagonal, arch, wave) for side images are set on the [Container](https://docs.personizely.net/container) that holds the image.
- **Large GIFs slow the widget.** The 2 MB upload limit applies to uploads only; a pasted URL can point to any size. Keep images small for mobile visitors.

## Examples

- **Hero image on the left of a popup:** a row [Container](https://docs.personizely.net/container) with the image (object fit **cover**, height 100%) and a content column. On phones, hide the image with **Show on: Desktop**.
- **Clickable banner:** an image with **Open URL** `/collections/new` and the **Track widget conversion** automation.

## Related

- [Button](https://docs.personizely.net/button)
- [Container](https://docs.personizely.net/container)
- [Actions](https://docs.personizely.net/action)
- [Styling](https://docs.personizely.net/style)
- [Widget elements](https://docs.personizely.net/widget-elements)