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

# Add and Customize Images

> Add and customize images to enhance landing pages, control layout, and create visually engaging designs that improve user experience.

The Image element lets you add visuals to your page, such as product images, illustrations, or backgrounds.

You can drag and drop it from the left sidebar and fully control how the image looks and behaves.

***

## Adding & Changing Images

* Click **Change Image** in the right panel
* This opens the image gallery modal

Inside the gallery, you can:

* Select from your uploaded images
* Upload new images
* Browse images from Unsplash

***

## Image Sizing Options

You can control how the image fits inside its container:

* **Fill** → Fills the entire area (may crop parts)
* **Fit** → Shows the full image without cropping
* **Stretch** → Stretches to match the container size
* **Original** → Keeps the original image size

***

## Adjusting Image Position

When the image is selected, you can reposition how it appears inside its container.

* Use the **position control (center circle)** to shift the visible area
* Example:\
  If your image is cropped, you can move the focus up to show a face instead of the background

***

## Image Dimensions

* Control width and height manually
* Use % or px depending on your layout

***

## Managing Your Images

You can manage your full image library from the gallery:

* Access all uploaded images
* Organize and reuse assets
* Upload new files anytime

***

## Cropping Images

Inside the gallery, you can crop images before using them:

* Select an image
* Open the crop tool
* Choose aspect ratios (1:1, 16:9, etc.)
* Apply crop

***

## Best Practices

* Use optimized images for faster loading
* Keep consistent image sizes across sections
* Use Fit or Fill depending on your layout needs