Add and edit images

A webpage 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 pane to display images in your content. You can first upload an image to a folder in the assets pane and then add it to your content, or you can drag and drop an image directly from your computer to a content area. When you drag and drop, the image is automatically uploaded and stored in the For This Page (or For This Block) folder.

You can edit images directly in Optimizely Content Management System (CMS 13) using the image editor, which provides basic features such as cropping, resizing, and transformations.

Add images to content

Image link property

You often add images to content through an image link property. You can drag an image from the assets pane 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 pane. See Media for information on manually uploading images to the assets pane.

To replace an already added image, drag and drop another image into the image property or click the image and select another image in the Select Image window.

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 to a folder under Media in the assets pane and then drag and drop the image from the folder or by using the Insert/edit image option in the rich-text editor.

Place the cursor in the editor area where you want the image.
Click Insert/edit image.
Click Browse files next to the Source field and select the desired image.
(Optional) Enter an Alternative description for the image, which gets added as an HTML <a> tag to the image. This 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.
Click Save.

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

Find image location

If you have already inserted an image in the rich-text editor and you want to find out where it is stored, select the image and hover over Go to media.

Edit image metadata

You can view and edit the metadata for an image, including the image name, content ID, copyright information, and so on.

Do one of the following to access an image's metadata:

In an image link property, click in the image to open the Select Image window, and then click More (...) > Edit for the image.
In the rich-text editor, select the image and then click Go to media.
In the Media tab of the assets pane, click More (...) > Edit for the image you want to edit.

Edit images

You can use the Image Editor in CMS 13 to crop, resize, and transform an image. Do one of the following to access the Image Editor:

In an image link property, click in the image to open the Select Image window, and then click More (...) > Open in Image Editor for the image.
In the rich-text editor, select the image and then click Image Editor in the toolbar.
In the Media tab of the assets pane, click More (...) > Open in Image Editor for the image you want to edit.

Crop

Select Crop in the Image Editor.
Enter values for Top, Left, Width, and Height, or draw a selection in the image to crop. You can also apply Preset values if such values are configured for the website.
Click Apply to save the changes before proceeding.
Continue editing the image as desired, and then save your changes.

Resize

Select Resize in the Image Editor.
Enter values for Width and Height. You can also apply Preset values if such values are configured for the website.
📘
Note
Constrain proportions is selected by default to retain the image proportions as you resize.
Click Apply to save the changes before proceeding.
Continue editing the image as desired, and then save your changes.

Transform

Select Transform in the Image Editor.
Rotate or flip the image as desired.
(Optional) Select Grayscale to convert the image to grayscale.
Continue editing the image as desired, and then save your changes.

Save as copy or replace the original

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

Save as a copy – If you selected the image on a page or block, the copy is saved in the local folder. If you selected the edited image 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.

You can also select the Quality for the image.

Alt text in CMS images

The site developer handles alt text.

Remove images from content

Removing an image makes it disappear from the content, but it remains in Media. Do one of the following to remove an image:

In an image link property, click More (...) > Remove for the image.
In a content area, click Close (x) for the image.
In the rich-text editor, select the image or place your cursor after the image and delete it.