節省儲存空間用量：插入圖片連結小技巧

除了有些私人的圖片或是 Logo 類型的設計之外，大部分的圖片都可以用免費圖庫連結來插入，這會比上傳圖片到 Lofted Realm 來得更加划算。

讓儲存空間的用量只要萬分之一^[1]！代表善用圖庫連結，一張圖片的儲存空間可以讓你插入 10,000 次的圖庫圖片。

語法有兩種：

1. Markdown 格式
2. HTML 格式

看起來很嚇人，但可以不用管太多技術細節，直接挑你順眼的結果複製貼上。

Markdown 格式

先輸入 /md Markdown 模式，

像輸入下面這樣的語法，把圖檔的連結放在括號中

![]()

![](https://example.png)

就大功告成了！上面的圖片也是這樣插入的，目前我們是用 Meee 免費圖床：

HTML

要是你想對你的圖片有更細緻的調整，那就必須要使用更複雜的 HTML 語法了。

跟開啟 Markdown 格式的做法類似，改成 html：

/html

基本的語法：

<img src="https://example.png" />

一般可以選擇斷行，會比較好讀、也比較好修改：

<img 
  src="https://example.png" 
/>

其中，img 代表 image，在 html 中代表插入圖片；src 代表 source，也就是指定圖片的來源。

調整寬度？

如果我們要調整寬度呢？就需要額外指定寬度 width (借用友站 Decents.me 的 Logo)：

<img
  src="https://decents.me/opengraph-image"
  width="200"
>

width=200

width=300

width=500

那置中呢？

置中也沒問題，這次需要的是 style 然後指定成 margin: auto

<img
  src="https://decents.me/opengraph-image"
  width="300"
  style="margin: auto"
>

更多！

加上邊框：

<img
  src="https://decents.me/opengraph-image"
  width="300"
  style="margin: auto; border: 4px solid black;"
>

圓角 (東西開始變多了，再多空幾行)

<img
  src="https://decents.me/opengraph-image"
  width="300"
  style="
    margin: auto; 
    border: 4px solid black;
    border-radius: 20px;
  "
>

陰影：

<img
  src="https://decents.me/opengraph-image"
  width="300"
  style="
    margin: auto; 
    border: 4px solid black;
    border-radius: 20px;
    box-shadow: 0 8px 10px rgba(0,0,0,0.3);
  "
>

各式各樣的 Style 都可以在這個標籤中變化！

自由發揮

現在 ChatGPT 很方便，想做什麼效果可以直接問他：

<img 
  src="https://example.com"
  width="150"
  style="display: block; margin: auto; transform: rotate(45deg);"
>

註

• [1]：假設圖檔 1 MB，插入連結字串只需要 100 Bytes，字串佔用的空間大概是圖片的 1/10486。