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

# Insert image in notes

You can insert images in Markdown easily with HackMD. HackMD will upload the image, 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.

>[!Note]Supported image formats: `png`, `jpg`, `gif`, `bmp`, `tif`
>:lock: Free users can upload images up to 1 MB.
>:unlock: Paid 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 =50%x)

For example：
![](https://i.imgur.com/zy4JDY4.png =50%x)

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

Here it is:

## Specify width
Insert `=200x` 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 =200x)

舉例：
![](https://i.imgur.com/zy4JDY4.png =200x)

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

Here it is: