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

# Images Panel

> Upload, manage, and insert images into your document from the sidebar panel.

The **Images** panel (<Icon icon="image" size={16} />) lets you upload, generate, and browse images for your document. It has three tabs: **My Images**, **AI Gen**, and **Stock**.

<Frame>
  <img src="https://mintcdn.com/centerbit/h7kgRT9gP8dmUkLc/images/application/sidebar-images/sidebar-images-panel.png?fit=max&auto=format&n=h7kgRT9gP8dmUkLc&q=85&s=179fd40dc1096f1c6472bb25e6730da1" alt="Images sidebar panel — My Images tab" width="1660" height="989" data-path="images/application/sidebar-images/sidebar-images-panel.png" />
</Frame>

***

## My Images

This tab shows all images uploaded to the current document. At the top is a drop zone where you can **click or drag & drop** files to upload.

**Upload limits:**

| Constraint               | Value                |
| ------------------------ | -------------------- |
| **Formats**              | PNG, JPG, JPEG, WebP |
| **Max file size**        | 25 MB                |
| **Max files per upload** | 5                    |

### Inserting images into your document

There are two ways to insert an uploaded image:

1. **Copy markdown** — hover over an image and click the <Icon icon="copy" size={16} /> **Copy** button. This copies the full markdown syntax to your clipboard, ready to paste into the editor.
2. **Drag & drop** — drag an image directly from the panel into the editor. The markdown syntax is inserted automatically at the drop position.

<Frame>
  <img src="https://mintcdn.com/centerbit/h7kgRT9gP8dmUkLc/images/application/sidebar-images/hover-image-buttons.png?fit=max&auto=format&n=h7kgRT9gP8dmUkLc&q=85&s=a077fa31b9b4fe801551b68baecedbe8" alt="Hover actions on an image — Copy and Delete buttons" width="264" height="198" data-path="images/application/sidebar-images/hover-image-buttons.png" />
</Frame>

When hovering over an image, two buttons appear:

* <Icon icon="copy" size={16} /> **Copy** — copies the markdown image syntax (e.g., `![filename.png](/api/assets/...)`)
* <Icon icon="trash-2" size={16} /> **Delete** — permanently removes the image from the document

### Markdown image syntax

Images use standard Markdown syntax:

```markdown theme={null}
![Caption text](image-path)
```

The text inside the square brackets becomes the **figure caption**. Captions are auto-numbered (e.g., *Figure 1: Caption text*).

<Warning>
  If the square brackets are empty (`![](image-path)`), **no caption** is generated for the image.
</Warning>

You can customize caption appearance (prefix, font size, font style, alignment) or disable captions entirely in the [Styles panel](/getting-started/editor/sidebar-styles#figure-captions).

<Tip>
  For the full image syntax reference including sizing, alignment, anchors, and the image directive, see [Markup Reference → Images](/markup-reference/images).
</Tip>

***

## AI Gen

Generate images using AI directly from the sidebar. Enter a prompt, choose an aspect ratio, and optionally specify a style.

<Frame>
  <img src="https://mintcdn.com/centerbit/h7kgRT9gP8dmUkLc/images/application/sidebar-images/image-ai-gen-tab.png?fit=max&auto=format&n=h7kgRT9gP8dmUkLc&q=85&s=a187b0df8843be54e7f683160527deb8" alt="AI image generation tab" width="346" height="592" data-path="images/application/sidebar-images/image-ai-gen-tab.png" />
</Frame>

**Options:**

| Setting          | Values                                                                 |
| ---------------- | ---------------------------------------------------------------------- |
| **Aspect Ratio** | 1:1 (Square), 16:9 (Wide), 9:16 (Tall), 4:3 (Standard), 3:4 (Portrait) |
| **Style**        | Optional — e.g., `cartoon`, `photorealistic`, `watercolor`             |

Generated images are automatically added to your **My Images** library and can be inserted into the document the same way as uploaded images.

<Note>
  AI image generation consumes credits from your plan. The credit cost per image is displayed below the generate button.
</Note>

***

## Stock

Search for free high-quality photos powered by **Unsplash**. Enter a search term and browse the results.

<Frame>
  <img src="https://mintcdn.com/centerbit/h7kgRT9gP8dmUkLc/images/application/sidebar-images/stock-images-tab.png?fit=max&auto=format&n=h7kgRT9gP8dmUkLc&q=85&s=b20c41bcc558d21893aab524c341f480" alt="Stock images tab — Unsplash search" width="358" height="493" data-path="images/application/sidebar-images/stock-images-tab.png" />
</Frame>

Stock images can be inserted via **drag & drop** or by clicking the <Icon icon="copy" size={16} /> **Copy** button (copies the markdown with the public Unsplash URL). An <Icon icon="external-link" size={16} /> button opens the full-resolution image in a new tab.

Photographer credits are shown on hover at the bottom of each image.
