> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-image.md).

# AX - Image

## Overview

**AX - Image** is an Experience Cloud component that displays images on Experience Sites pages with control over sizing, cropping, alignment, and loading behavior.

Use it to show product photos, logos, banners, profile pictures, or any visual content from Salesforce Content Documents, static resources, or external URLs. Configure how images display, crop, and scale in Experience Builder without code.

Perfect for product galleries, branded headers, visual content sections, profile displays, or anywhere your portal needs flexible image presentation with responsive sizing.

## Configuration

### Properties

**CMS Image** and **Image URL or Expression** specify the source of the image — from a CMS or a direct URL — whichever best suits your image-management preferences.

**Width** and **Height** determine the displayed dimensions so the image fits harmoniously within the page layout while maintaining its clarity.

**Position** adjusts the alignment of the image within its container for a balanced, aesthetically pleasing layout.

**Static Images** sets the image as static — use it when the image doesn't require responsive adjustments and should remain constant across screen sizes.

**Fluid** and **Fluid Grow** allow the image to adjust its size responsively, adapting smoothly to different screen sizes.

**Thumbnail** displays the image in a compact form, suitable for galleries or previews.

**Lazy Loading** chooses automatic or lazy loading to optimize page-load times, balancing immediate visibility with overall performance.

**Alternative Text** provides accessible text describing the image.

**Crop Size**, **Crop Fit**, and **Crop Position X / Y** customize the image's cropping to focus on the most relevant parts.

**Magnifier Type** selects the magnification style applied when viewing image details, and **Magnifier Attributes** fine-tune the magnifier's behavior and appearance.

**CMS Compare Image** / **Compare Image URL or Expression** and **Compare Attributes** enable a before/after comparison view — set the second image and control its orientation, interaction, and labeling. **Compare Alternative Text** provides accessible text for the compare image.

## Styling

{% tabs %}
{% tab title="Margin" %}
Controls the outer spacing around the image.
{% endtab %}

{% tab title="Padding" %}
Controls the inner spacing around the image.
{% endtab %}

{% tab title="Image Border" %}

* **Radius:** Adjust the corner roundness of the image.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-image.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.