2026 Markdown 貼圖語法完整懶人包：GitHub、Notion、HackMD 4 平台速查表
懶人版：三秒懂三件事
- Markdown 圖片基本語法是
，所有平台都支援 - 調整圖片大小的方式每個平台都不一樣，這是最大的坑
- 圖片必須是「可公開存取的直連」，不能用 Google Drive 分享連結
好，接下來是完整速查表。
基本語法：所有平台通用
替代文字：圖片無法顯示時會出現的文字，也是螢幕閱讀器會讀的內容圖片網址：必須是可直接存取的圖片 URL（直連）
加上標題（hover 時會顯示）：
參考式語法（適合重複使用同一張圖）：
![替代文字][logo]
[logo]: https://example.com/image.png "標題"
各平台圖片大小調整方式
這是最容易踩坑的地方。根據我實測 5 個主流平台的結果，每家的做法都不一樣。
| 平台 | 調整大小語法 | 範例 |
|---|---|---|
| GitHub | 不支援 Markdown 調整，需用 HTML | <img src="url" width="300"> |
| HackMD | 在 URL 後加 =寬x高 |
 |
| Notion | 拖拉調整，無語法控制 | 上傳後用滑鼠拉邊框 |
| Obsidian | 在 alt 加 ` | 寬或 |
| Typora | 用 HTML 或 zoom 標記 | <img src="url" style="zoom:50%"> |
GitHub
GitHub 的 Markdown 渲染器不支援任何圖片大小語法。唯一的辦法是用 HTML：
<img src="https://example.com/image.png" width="400" alt="說明文字">
GitHub 支援 <img> 標籤的 width、height、align 屬性，但不支援 style 屬性（出於安全考量會被過濾掉）。
HackMD
HackMD 用了自訂的擴充語法，在 URL 後面加 =寬x高：
只指定寬度，高度自動縮放：
直接講結論，這個語法是 HackMD 專屬的，在其他平台不會生效，反正就是別在 GitHub 試。
Obsidian
Obsidian 的圖片大小語法放在替代文字裡：
Obsidian 還支援 Wiki-style 的內部圖片連結：
![[image.png|300]]
Notion
Notion 的 Markdown 匯入支援基本圖片語法，但大小調整只能在 Notion 介面中用滑鼠拖拉。沒有語法控制選項。
另外要注意：Notion 會將外部圖片重新上傳到自己的 CDN（prod-files-secure.s3.us-west-2.amazonaws.com），所以圖片來源不影響顯示速度，但也代表你無法透過更新原始圖片來更新 Notion 中的版本。
各平台圖片託管支援度
不是每個圖片 URL 都能在每個平台正常顯示。以下是我實測的結果：
| 圖片來源 | GitHub | HackMD | Notion | Obsidian | Typora |
|---|---|---|---|---|---|
| 圖床直連（lpic.cc、ImgBB 等） | 正常 | 正常 | 正常 | 正常 | 正常 |
| GitHub 倉庫內圖片 | 正常 | 正常 | 正常 | 需設定 | 正常 |
| Google Drive 分享連結 | 不顯示 | 不顯示 | 自動重傳 | 不穩定 | 不顯示 |
| Dropbox 分享連結 | 不顯示 | 不顯示 | 自動重傳 | 不穩定 | 不顯示 |
| Base64 內嵌 | 支援 | 支援 | 不支援 | 支援 | 支援 |
劃重點：Google Drive 和 Dropbox 的分享連結不是圖片直連，大多數 Markdown 平台無法正確渲染，別浪費時間硬塞。要在 Markdown 中嵌入圖片，你需要一個能提供「直連」的圖片託管服務。為什麼雲端硬碟 + Markdown 組合幾乎都會失敗，可以看 Google Drive/Dropbox vs 圖床 的技術層面對比。
Hotlinking 政策：你的圖片會被擋嗎？
Hotlinking 是指在自己的網頁中直接引用別人伺服器上的圖片。有些服務會擋 hotlinking 以節省頻寬。
| 服務 | 允許 Hotlinking | 備註 |
|---|---|---|
| 圖床服務（lpic.cc、ImgBB 等） | 是 | 這是圖床的核心功能 |
| GitHub 倉庫 | 是（有限制） | 高流量可能被限速 |
| Imgur | 部分（台灣已封鎖） | 2025 年後台灣 IP 無法存取 |
| WordPress.com | 否 | 會檢查 Referer |
| 多數網站圖片 | 否 | 通常會擋非本站引用 |
技術寫作的圖片最佳實踐
寫技術文件或部落格時，圖片處理的幾個原則：
替代文字不能偷懶
<!-- 不及格 -->
<!-- 合格 -->
替代文字的功能：
- 圖片載入失敗時顯示文字說明
- 螢幕閱讀器會讀出來（無障礙設計）
- 搜尋引擎靠它理解圖片內容（SEO）
圖片檔案命名
<!-- 不及格 -->
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg
<!-- 合格 -->
github-actions-workflow-config.png
npm-install-success-output.png
好的命名讓你半年後還能一眼知道這張圖是什麼。
圖片格式選擇
- 截圖、UI 介面圖：PNG（銳利文字不會模糊）
- 照片、複雜圖像：WebP 或 JPEG（檔案更小）
- 圖示、Logo、圖表：SVG（縮放不失真）
- 動態展示操作流程：GIF 或 WebP 動畫（但控制在 5MB 以下）
如果要深入了解 WebP、AVIF、JPEG XL 三者的檔案大小與相容性差異，可以參考 WebP/AVIF/JPEG XL 格式比較。
壓縮再上傳
不管用什麼格式，上傳前先壓縮。推薦工具：
- Squoosh（squoosh.app）— Google 出品，瀏覽器內操作
- TinyPNG（tinypng.com）— 批次壓縮 PNG/JPEG
- ImageOptim（macOS）— 拖拉即壓縮，保留畫質
跨平台相容的萬用寫法
如果你的 Markdown 文件需要在多個平台都能正常顯示，用這個策略：
- 圖片語法：用標準
語法，不要用任何平台專屬的大小調整語法 - 圖片大小：上傳前就調整好圖片尺寸（寬度建議 600-800px），而不是靠語法控制
- 圖片來源：使用圖床直連（例如 lpic.cc 提供免註冊上傳和直連），不用 Google Drive 或 Dropbox 的分享連結
- 圖片格式：PNG 或 WebP，避免 BMP 或 TIFF
不過要注意，lpic.cc 目前不支援自訂圖片尺寸或即時裁切，你需要在上傳前就把圖片處理好。如果你需要 API 批量上傳或動態處理，得考慮 Cloudinary 或 Imgur API（非台灣地區）等服務。若你正在挑選直連穩定度高的免費圖床，可以先看 10 個免費圖床實測比較 再決定。
常見問題 FAQ
Q1：Markdown 可以讓圖片置中嗎？
標準 Markdown 語法不支援圖片對齊。在 GitHub 上可以用 HTML：<p align="center"><img src="url" width="400"></p>。HackMD 支援 {:center} 語法。Notion 和 Obsidian 則透過 UI 操作調整。
Q2：Markdown 可以用本地圖片嗎？
可以，用相對路徑：。但這只在本地編輯器（Typora、Obsidian、VS Code）有效。如果文件要發布到網路上，必須把圖片上傳到圖床取得公開 URL。
Q3：為什麼我的圖片在 GitHub README 上不顯示？
最常見的原因有三個：(1) 圖片 URL 不是直連，而是需要登入才能存取的連結；(2) 圖片來源伺服器擋了 GitHub 的 hotlinking；(3) 相對路徑寫錯，沒有對應到倉庫中的正確位置。
Q4：HackMD 的圖片大小語法 =300x 在其他平台也能用嗎？
不能。=寬x高 語法是 HackMD 自訂的 Markdown 擴充，在 GitHub、Notion、Obsidian 等平台都不會生效。如果你的文件需要跨平台使用，建議在上傳前就調整好圖片尺寸，或使用 HTML <img> 標籤（GitHub 支援，HackMD 也支援）。
Q5：圖片直連和分享連結差在哪裡？
直連（Direct Link）是一個直接指向圖片檔案的 URL，通常以 .jpg、.png、.webp 結尾。瀏覽器打開後只會看到圖片本身。分享連結則是一個網頁 URL，打開後會看到一個包含圖片的頁面（例如 Google Drive 的預覽頁面）。Markdown 的圖片語法需要直連才能正確渲染。
參考資料
- Markdown Guide - Images — Markdown 官方圖片語法文件
- GitHub - Basic formatting syntax — GitHub Markdown 語法文件
- HackMD - Supported Markdown Syntax — HackMD 支援的 Markdown 語法
- Obsidian - Embed files — Obsidian 嵌入檔案文件
- MDN - HTML img element — HTML img 標籤參考