# Insert Pictures in Designer

## Content

You can insert pictures into a worksheet using the Insert tab in the SpreadJS Designer.
Designer provides two placement options:

* Place in Cells
* Place over Cells

The selected option determines how the picture behaves in the worksheet.

## Insert a Picture

To insert a picture:

1. Go to the **Insert** tab.
2. In the **Illustrations** group, select Picture.
3. Choose one of the following options:

* **Place in Cell**
* **Place over Cells**

The selected option determines how the picture behaves in the worksheet.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260421.e396d3.png?width=800)

## Place in Cell

When you select **Place in Cell**:

* The image is inserted into the selected cell.
* The image becomes the cell value.
* It participates in sorting, filtering, formulas, and other worksheet operations.
* The image is stored as image rich data.

Use this mode when the image is part of your dataset.
For more information, see [Image Rich Data](/spreadjs/docs/features/cells/image-rich-data).
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.17c7b6.png?width=800)

## Place over Cells

When you select Place over Cells:

* The image is inserted as a picture shape.
* It can be freely moved and resized.
* It does not participate in worksheet data operations.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.a0f084.png?width=800)
Use this mode for layout and presentation purposes.
For more information, see [Pictures Shape](/spreadjs/docs/features/UnderstandingShapes/picture-shape).

### Picture Format Ribbon

When a picture shape is selected, the **Picture Format** tab appears in the ribbon.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.6f654d.png?width=800)
From this tab, you can:

* Adjust image appearance (corrections, color, transparency)
* Set alternative text
* Rotate and align the picture
* Crop the image
* Set height and width
* Open the Format Pane or Selection Pane

These options apply to picture shape.

## Convert Between Placement Modes

Pictures can be converted between Place in Cell and Place over Cells in the Designer.
The available commands depend on the current picture type.

### Convert a Picture Shape to Place in Cell

When a picture shape is selected, you can convert it using:

* The Place in Cell button in the *Picture Format* ribbon

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.95c7ac.png?width=800)

* The quick conversion button displayed at the top‑right corner of the picture

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.cea269.png?width=200)

* The right‑click context menu → Place in Cell

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260421.f25fb4.png?width=200)
After conversion:

* The image is stored as a cell value.
* The picture shape is removed.
* The image becomes image rich data.

### Convert a Picture in Cell to Place over Cells

When a cell containing an image is selected, you can convert it using:

* The quick conversion button displayed at the top‑right corner of the image

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.e7ca97.png)

* The right‑click context menu → Picture in Cell → Place over Cells

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260421.c6660c.png?width=350)
After conversion:

* A picture shape is created.
* The image is no longer stored as a cell value.

## Additional Options for Pictures in Cells

When right‑clicking a cell that contains an image, the context menu also provides:

* Show Preview — Opens a preview card for the image

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.7d8ccd.png?width=200)

* View Alt Text — The **Alt Text** pane opens on the right side of the Designer, where you can enter or modify the alternative description.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260407.aa2833.png?width=200)