# Add an Image to Page

After uploading images to Page Designer, you can easily place them on your page and adjust their appearance to match your design requirements.

***

### Adding an Image to the Page

Once your image appears in the **Image menu**, you can add it to the page layout as follows:

1. Open the **Image** menu in Page Designer.
2. Select the image you want to use.
3. **Drag and drop** the image from the Image menu onto the desired location on the design canvas.

#### Example: Drag and Drop Image onto Page

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FA0CL5hmm0GtA6KKMc69L%2FASdrag-dropImg.png?alt=media&#x26;token=1cfd5070-1e39-48e4-aa05-76a11eb5009f" alt=""><figcaption></figcaption></figure>

Once dropped, the image becomes a component on the page and can be further customized.

***

### Adjusting Image Appearance

After adding the image, Page Designer provides several options to customize how the image looks.

***

#### Image Filter

You can apply different **filter types** to the image to achieve the desired visual effect.

#### Example: Image Filter Options

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FpnLFJREneke0YXmvoqzi%2FAIfilter.png?alt=media&#x26;token=b5b91666-9e5f-4a7d-8d27-3a629e6d0b4a" alt=""><figcaption></figcaption></figure>

Select a filter that best suits the design style of your page.

***

#### Image Opacity

You can control the transparency of the image by adjusting the **Opacity** setting.

1. Drag the **Opacity slider**, or
2. Manually enter the opacity value

#### Example: Adjusting Image Opacity

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FYPI7vM8SoQcbl6gS7F97%2FAIopacity.png?alt=media&#x26;token=6166d96e-3871-4fbf-aecc-b48554a92f11" alt=""><figcaption></figcaption></figure>

This is useful for background images or overlay effects.

***

#### Resizing the Image

You can resize the image to fit your layout by adjusting its **width and height**.

* Modify the width and height values directly
* Resize the image visually using layout controls

#### Example: Resize Image

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FP66U6R0DKfaYzk2WjmH9%2FAIresizeIMG.png?alt=media&#x26;token=33bb9b83-8687-4066-8389-7a75d6c021f5" alt=""><figcaption></figcaption></figure>

Ensure the image fits well within the surrounding layout or container.

***

### Best Practices

* Resize images proportionally to avoid distortion
* Adjust opacity carefully when using images as backgrounds
* Use filters consistently to maintain a uniform visual style
* Preview the page on different screen sizes after adding images

***

### Summary

Adding and customizing images in Page Designer is straightforward:

* Drag and drop images from the Image menu
* Apply filters for visual effects
* Adjust opacity for transparency
* Resize images to match layout needs

These options allow you to integrate images smoothly into your page designs and enhance the overall visual experience.


---

# Agent Instructions: 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:

```
GET https://docs.onewebstack.com/oneweb-platform-th/designer-reference/page-designer/page-designer-tools/generic-tools/add-an-image-to-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.