[**中文版**](https://hackmd.io/@docs/how_to_upload_image_tw)

{%hackmd rJ_1SdPkxx %}

# Insert image in notes

You can insert images in Markdown easily with HackMD. HackMD will upload the image(to HackMD's private cloud space), generate the URL to the image, and render it in the note.

The permissions for the image are subordinate to the permissions for the note. So if only you can read the note, then only you can see the image, even if someone happens to have the link to the image.

:::success
Supported image formats: `png`, `jpg`, `gif`, `bmp`, `tif`
:lock: Free users can upload images up to 1 MB.
:sparkles: Prime users can upload **20 MB**.
:::

:::warning
:exclamation: If you delete **the note to which the images were uploaded**, the relation to those would also be removed.

For example, you upload an image A to note X and paste its link to note Y and Z. Afterwards, you delete X, then you will not see A when viewing Y and Z.

A media library is on our roadmap so that the images and other assets in a note can be treated separately from the note itself.
:::

 

# Three ways to insert an image

## 1. Drag-and-drop

Drag-and-drop your image file and the resulting image URL will appear at where your cursor is at.

**▲ Drag-and-drop image to upload**

## 2. Upload from the tool bar <i class="fa fa-picture-o ui-editor-toolbar-image"></i>

Click on the <i class="fa fa-picture-o ui-editor-toolbar-image"></i> icon from the tool bar and choose the file to upload.

**▲ Select image from files**

## 3. Paste from your clipboard

HackMD supports copy-pasting images. Use (<kbd>Ctrl</kbd> + <kbd>V</kbd> or <kbd>⌘ Cmd</kbd>+ <kbd>V</kbd>) to insert the image at your cursor.

&nbsp;

# How to change image size?

## Specify proportion
To adjust the image size proportionally, you can insert `=50%x` after the link of the uploaded image. This way, the image size will be adjusted according to the specified percentage without exceeding the display width of the notebook.

Of course, you can freely adjust the percentage to 20%, 45%, 75%, or any other value you prefer.

![](image link =30%x)
 or
![](image link =300x)

For example：
![Docs](https://hackmd.io/_uploads/Bk1YRXXP1g.jpg =30%x)

>[!Tip]You must add a space before `=` !

Here it is:

## Specify width
Insert `=300x` after the link to specify the image width. The size can be adjusted freely, such as `10x`, `350x`, or `600x`, but the maximum width will not exceed the display width of the note.

![](image link =300x)

舉例：
![Docs](https://hackmd.io/_uploads/Bk1YRXXP1g.jpg =300x)

>[!Tip]You must add a space before `=` !

Here it is:

## Set images position
### center

Copy the syntax below, and paste your image's link in `src="https://hackmd.io/favicon.png"`.
- `width:10%`： Set image size

<img style="display:block;margin:20px auto;padding:1px;border:1px #eee;width:10%;" src="https://hackmd.io/favicon.png" />

<img style="display:block;margin:20px auto;padding:1px;border:1px #eee;width:20%;" src="https://hackmd.io/favicon.png" />

&nbsp;

### right-align

Copy the syntax below, and paste your image's link in `src="https://hackmd.io/favicon.png"`.
- `width:10%`： Set image size
- `margin:20px right`： Set the picture margins and align to the right

<img style="display:block;margin:20px right;padding:1px;border:1px #eee;width:10%;" src="https://hackmd.io/favicon.png" />

<img style="display:block;margin:10px 0 10px auto;padding:5px;border:1px #eee #000;width:20%;" src="https://hackmd.io/favicon.png" />

# Interactive Images and Graphs

Welcome to the new image and UML toolbar! Here is an introduction to some of the newly added features to make it easier for you to interact with images and graphs.

### 1. Image Zoom Feature

Starting from May 2025, we have added an image zoom feature. You can zoom in on images or UML diagrams using the following methods:

- **Click to Zoom**: Simply click on the image or UML diagram to zoom in and view the details.
- **Hover to Zoom**: Move the cursor over the image area and use the toolbar above the image to zoom in.


### 2. Interactive UML Diagrams

Some UML diagrams generated by UML language support interaction. Currently, we have identified Markmap and Vega-Lit as the interactive diagrams. If you want to interact with a UML diagram, press and hold the `Option/Alt` key while clicking the diagram. This will prevent the image zoom feature from being triggered.