---
title: Add and edit images
slug: cms-12/docs/add-and-edit-images
docTags: 
createdAt: 2026-08-10T15:56:02.000Z
---

A web page does not embed images. Instead, it links to the media library where images are stored. The images must be available in a folder under **Media** in the assets panel to display images in your content. You can first upload an image to a folder in the assets panel and then add it to your content, or you can drag and drop an image directly from your computer to a content area. In this latter case, the image is automatically uploaded and stored in the **For This Page** (or **For This Block**) folder.

You can edit images inside Optimizely Content Management System (CMS) using the **Image Editor**, providing basic features like cropping, resizing, and transforming.

## Add images to content

### In image link property

Images are often added to content through an **image link property**. You can drag an image from the assets panel or your computer to the property. If you drag and drop from your computer, the image is automatically uploaded and saved in the **For this Page** or **For this Block** folder in the assets panel. See [Media](docId:_VybRxYR8j6sDgTc85jcv) for information on manually uploading images to the assets panel.

To replace an already added image, click the image, and the **Select Image** dialog box opens. In this dialog you can select another already uploaded image or upload a new image. You can also replace the current image by simply dragging and dropping another image into the image property.

![Select Image dialog box](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/sv6PrdbwJgoWmK7Vnf3vH-20260720-145524.png)

![Drag and drop a image into the image property](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/vyVCZLWEdiXzrYqRGWNP0-20260720-145524.png)

### In rich-text editor or content areas

You can add images to the **rich-text editor** or **content areas** in pages or blocks. To add an image, you can drag and drop the image directly from your computer into the rich-text editor. The image is automatically stored in the **For This Page** (or **For This Block**) folder with its original file name. Another way is to first [upload the image](docId\:hGO2vWkXIrTunV21rTOTY) to a folder under **Media** in the assets panel and then add the image through **drag and drop** from the folder or by using the **Insert/edit image**

![Insert/edit media button](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oxpHQkBdDT0wYSfspPjvS-20260720-145524.png "Insert/edit media button")

button on the toolbar in the rich-text editor.

1. Place the cursor in the editor area where you want the image.
2. Click the **Insert/edit image** button on the editor toolbar.
3. Select the desired image in the **Source** folder structure.
4. Enter an **Image description** for the image. It is added as an HTML \<a> tag to the image, which is important when a reader has turned off the display of images in the browser or when a visually impaired user is using a screen reader.
5. Click **Ok**.

:::hint{type="info"}
**Note**

The TinyMCE editor supports the following image formats: **jpeg**, **png**, **gif**, and **bmp**.
:::

### Aligning images

You can align images so that they are aligned to, for example, the right, and the text wraps around the image to the left:

![Image aligned right in content area](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/V0YChdRU1VFQfWC3am8cV-20260720-145524.png "Image aligned right in content area")

1. Place the cursor at the end of the text you want to wrap around the image.
2. Drag and drop the image onto this location.
3. Select the image.
4. On the editor toolbar, select **Format** > **Align** > **Right**:

   ![Image: Aligning images using the Format Align option on toolbar](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/vGmGqrrMmSqtxnoD___rz-20260720-145524.png "Image: Aligning images using the Format Align option on toolbar")

## Find the image location

If you have an already inserted image in the rich-text editor and you want to find out where it is stored, select the image and a **Go to media** button is displayed. Click this button to open the image or hover over it to see where the image is stored.

![Finding an image's location](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/yvR_wzhjyeY6pMKsxjRLN-20260720-145524.png "Finding an image's location")

## Edit images

Do one of the following to access the **Image Editor** options:

- In an image link property, click in the image property to open the **Select Image** dialog box, and select **Open in Image Editor** from the image's context menu:

  ![Context menu, Open in Image Editor](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/HClnfbokZ6VnIfVlIpQJn-20260720-145524.png "Context menu, Open in Image Editor")
- In the rich-text editor, select the image and then click **Image Editor** in the toolbar.

  ![select the image and then click Image Editor](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_SOY9Hr8zBS_FjEXgvbas-20260720-145524.png "Image: Image toolbar")
- Locate the image under **Media** in the assets panel, and select **Open in Image Editor** from the context menu.

  ![Open media in Image editor](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/4J-aiwD550pbP7Xdd46eG-20260720-145524.png "Image: open media in Image editor")

Image editing features include cropping, resizing, and transforming:

### Crop

Enter values for **Top**, **Left**, **Width**, and **Height**, or draw a selection in the image to crop.

:::hint{type="info"}
**Note**

Remember to click **Apply** to save the changes before proceeding.
:::

You can apply **Preset** values if such values are configured for the website.

![Enter values into image editor](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/MDTMWoSOJi3U0O_iLjFhM-20260720-145524.png)

### Resize

Enter values for **Width** and **Height**, or move a corner handle to resize, and keep **Constrain proportions** selected to retain the image proportions.

:::hint{type="info"}
**Note**

Click **Apply** to save the changes before proceeding.
:::

You can apply **Preset** values if such values are configured for the website.

![Resize the image editor](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/pWtogr6xtZDJsf1JcL-qQ-20260720-145525.png)

### Transform

Flip or rotate the image, or select **Grayscale** to convert to grayscale.

![Transform the image editor](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/vcZGC4XNXtKQlJfVh_gGg-20260720-145525.png)

You can save an edited image file as a copy or replace the original file:

- **Save as a copy** – If the image was selected on a page or block, the copy is saved in the **local folder**. If the edited image was selected in the media structure, the (renamed) copy is saved in the same folder as the original.
- **Replace original image** – This action affects places on the website where the image is used.

:::hint{type="info"}
**Note**

Selecting the **Edit** option in the context menu for an image lets you edit the **metadata**, which for an image can be the photographer, description, and copyright information, and such. See [Media](docId:_VybRxYR8j6sDgTc85jcv).
:::

## Alt text in CMS images

The site developer handles alt text. However, here are options worth investigating:

- [Enhancements for TinyMCE – TinyMceEnhancements plugin](https://gregwiechec.com/2024/02/enhancements-for-tinymce-tinymceenhancements-plugin/) – blog post by *Grzegorz Wiecheć*
- [Automatic Alt Text for images using Optimizely CMS 12](https://www.gulla.net/en/blog/automatic-alt-text-for-images-using-optimizely-cms-12/) – blog post by *Tomas Hensrud Gulla*
- [Overriding TinyMCE’s Default Alt Text Validation in Optimizely](https://blogs.perficient.com/2023/10/20/overriding-tinymces-default-alt-text-validation-in-optimizely/) – blog post by *Aiden Britt*

## Remove images from content

For an image in:

- an **image property**, click **Remove** ![Rmove button X](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/hcMWDhK4s6kEYA5patlh--20260720-145525.png).
- a **content area**, select **Remove** in the context menu.
- the **rich-text editor**, click the image, and delete it.

:::hint{type="info"}
**Note**

Removing an image makes it disappear from the content, but it remains in **Media**.
:::