> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> Display images with optional links and views in UI Studio applications

The Image component displays static or dynamic images in your UI Studio pages. Use images to add visual content, branding, product photos, or clickable banners. The component supports clickthrough links, alternative text, and fallback images.

## Basic usage

Add an image component to your UI Studio page to display visual content.

<Frame caption="Basic Image component">
  <img src="https://mintcdn.com/lucidworks/qwknCXYlTmFH7Hq2/assets/images/lw-platform/ui-studio/ui-studio-image-button.png?fit=max&auto=format&n=qwknCXYlTmFH7Hq2&q=85&s=7d2ed2a6cb977a7b2ba2ff29cd978c02" alt="Basic Image component" width="132" height="132" data-path="assets/images/lw-platform/ui-studio/ui-studio-image-button.png" />
</Frame>

Provide an image URL to display it on your page. The component supports common image formats including JPG, PNG, GIF, and SVG.

If the primary image fails, the component automatically loads the fallback image if one is configured. If both images fail, the component does not display in order to avoid broken image icons. If there is no image URL, the component does not render.

## Best practices

* Optimize images to reduce file size without sacrificing quality. While Lucidworks does not make a specific recommendation, tools such as TinyPNG, ImageOptim, or your image editor's "Save for Web" feature are available. The recommended maximum file size is 2MB for web display.

* If possible, configure a fallback image that displays if the primary image fails to load.

* Use appropriate image formats for different content types:

  * **JPG**: Photos and complex images
  * **PNG**: Graphics with transparency or text
  * **SVG**: Logos and icons to ensure correct scaling
  * **WebP**: Modern format with better compression, if browser support allows

* Always provide meaningful Alt (alternative) text that conveys the purpose and content of the image. Screen readers rely on this to describe images to visually impaired users. Alt text also improves SEO and displays when images fail to load.

* Avoid using images of text for important content. Screen readers cannot read text embedded in images.

## Configuration properties

<ParamField path="Image URL" type="string">
  URL to the image file.
</ParamField>

<ParamField path="Alt Text" type="string">
  Descriptive text for accessibility and SEO.

  Describe the image content and purpose. Avoid generic phrases like "image" or "photo".
</ParamField>

<ParamField path="Link" type="string">
  Clickthrough URL. When configured, clicking the image navigates to this URL.

  Examples:

  * `https://www.example.com`
  * `/products`
  * `https://example.com/offers`

  Leave blank for non-clickable images.
</ParamField>

<ParamField path="Fit Mode" type="dropdown" default="cover">
  Controls how the image fits within its container dimensions.

  <Expandable title="Options">
    <ParamField path="Contain" type="option">
      Scales the image to fit within the container while maintaining aspect ratio. May show letterboxing or pillarboxing (empty space on sides/top/bottom).
    </ParamField>

    <ParamField path="Cover" type="option">
      Scales the image to cover the entire container while maintaining aspect ratio. May crop portions of the image. This is the default.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="Border Radius (px)" type="number" default="0">
  Corner roundness in pixels.

  * `0` = Square corners (default)
  * `4-8` = Subtle rounded corners
  * `12-16` = Noticeably rounded corners
  * `50+` = Circular (when width equals height)
</ParamField>

<ParamField path="Fallback Image URL" type="string">
  Optional backup image URL. Displays if the primary image fails to load.
</ParamField>