---

title: Markdown 圖片速查表 keywords: Markdown 圖片速查表, Markdown 圖片語法, Markdown 圖片語法 description: Markdown 圖片、連結、引用、組合用法和常見錯誤的快速參考。

Markdown 圖片速查表

Markdown 圖片語法

Markdown 內聯圖片

![替代文字](image.jpg)
![替代文字](image.jpg "圖片標題")

Markdown 引用式圖片

![替代文字][img-ref]

[img-ref]: image.jpg "可選標題"

Markdown 圖片連結

[![替代文字](image.jpg)](https://www.markdownlang.com)

Markdown 指定尺寸

<img src="image.jpg" alt="替代文字" width="300" height="200">

Markdown 常見組合

Markdown 可點擊的圖片

[![專案Logo](logo.png)](https://github.com/user/repo)

Markdown 置中圖片

<div align="center">
  <img src="image.jpg" alt="描述">
</div>

Markdown 並排顯示圖片

<img src="img1.jpg" width="48%"> <img src="img2.jpg" width="48%">

Markdown 最佳實踐

類型	建議	示例
連結文字	使用描述性文字	✅ [使用者指南]()
連結文字	避免使用「點擊這裡」	❌ [點擊這裡]()
圖片檔案	使用相對路徑	✅ ./images/pic.jpg
替代文字	描述圖片內容	✅ ![介面截圖]()
檔案格式	網路友好格式	✅ JPG, PNG, WebP

Markdown HTML 輸出

Markdown	HTML
[text](url)	<a href="url">text</a>
	<img src="img" alt="alt">
<url>	<a href="url">url</a>

Markdown 常見錯誤

❌ 錯誤示例:
[Link(https://www.markdownlang.com)     ← 缺少右括號
![Image](image.jpg             ← 缺少右括號
[ Link ]( https://www.markdownlang.com ) ← 不必要的空格

✅ 正確示例:
[Link](https://www.markdownlang.com)
![Image](image.jpg)
[Link](https://www.markdownlang.com)