返回博客
教程指南

2026 Markdown 贴图语法速查表：GitHub、Notion、语雀、HackMD 平台终极对比

发布于10 min read
分享文章

懒得看长文？三句话总结

  1. Markdown 图片基本语法是 ![替代文字](图片网址)，所有平台都支持
  2. 调整图片大小的方式每个平台都不一样，这是最大的坑
  3. 图片必须是「可公开访问的直链」，不能用 Google Drive 分享链接

好，接下来是完整速查表。

基本语法：所有平台通用

![替代文字](https://example.com/image.png)
  • 替代文字：图片无法显示时会出现的文字，也是屏幕阅读器会读的内容
  • 图片网址：必须是可直接访问的图片 URL（直链）

加上标题（hover 时会显示）：

![替代文字](https://example.com/image.png "鼠标悬停时的标题")

引用式语法（适合重复使用同一张图）：

![替代文字][logo]

[logo]: https://example.com/image.png "标题"

各平台图片大小调整方式

这是最容易踩坑的地方。根据我实测 5 个主流平台的结果，每家的做法都不一样。

平台 调整大小语法 示例
GitHub 不支持 Markdown 调整，需用 HTML <img src="url" width="300">
HackMD 在 URL 后加 =宽x高 ![alt](url =300x200)
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高：

![说明文字](https://example.com/image.png =300x200)

只指定宽度，高度自动缩放：

![说明文字](https://example.com/image.png =300x)

这个语法是 HackMD 专属的，在其他平台不会生效。

Obsidian

Obsidian 的图片大小语法放在替代文字里：

![说明文字|300](https://example.com/image.png)
![说明文字|300x200](https://example.com/image.png)

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 中嵌入图片，你需要一个能提供「直链」的图片托管服务。

Hotlinking 策略：你的图片会被拦吗？

Hotlinking 是指在自己的网页中直接引用别人服务器上的图片。有些服务会拦截 hotlinking 以节省带宽。

服务 允许 Hotlinking 备注
图床服务（lpic.cc、ImgBB 等） 是 这是图床的核心功能
GitHub 仓库 是（有限制） 高流量可能被限速
Imgur 部分（中国大陆无法访问） 需要科学上网
WordPress.com 否 会检查 Referer
多数网站图片 否 通常会拦截非本站引用

技术写作的图片最佳实践

写技术文档或博客时，图片处理的几个原则：

替代文字不能偷懒

<!-- 不及格 -->
![image](url)
![截图](url)

<!-- 合格 -->
![GitHub Actions 工作流程设置页面](url)
![终端显示 npm install 成功的输出结果](url)

替代文字的功能：

  1. 图片加载失败时显示文字说明
  2. 屏幕阅读器会读出来（无障碍设计）
  3. 搜索引擎靠它理解图片内容（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 以下）

压缩再上传

不管用什么格式，上传前先压缩。推荐工具：

  1. Squoosh（squoosh.app）— Google 出品，浏览器内操作
  2. TinyPNG（tinypng.com）— 批量压缩 PNG/JPEG
  3. ImageOptim（macOS）— 拖拽即压缩，保留画质

跨平台兼容的万能写法

如果你的 Markdown 文件需要在多个平台都能正常显示，用这个策略：

  1. 图片语法：用标准 ![alt](url) 语法，不要用任何平台专属的大小调整语法
  2. 图片大小：上传前就调整好图片尺寸（宽度建议 600-800px），而不是靠语法控制
  3. 图片来源：使用图床直链（例如 lpic.cc 提供免注册上传和直链），不用 Google Drive 或 Dropbox 的分享链接
  4. 图片格式：PNG 或 WebP，避免 BMP 或 TIFF

不过要注意，lpic.cc 目前不支持自定义图片尺寸或即时裁切，你需要在上传前就把图片处理好。如果你需要 API 批量上传或动态处理，得考虑 Cloudinary 或 Imgur API（需科学上网）等服务。

常见问题 FAQ

Q1：Markdown 可以让图片居中吗？

标准 Markdown 语法不支持图片对齐。在 GitHub 上可以用 HTML：<p align="center"><img src="url" width="400"></p>。HackMD 支持 {:center} 语法。Notion 和 Obsidian 则通过 UI 操作调整。

Q2：Markdown 可以用本地图片吗？

可以，用相对路径：![alt](./images/photo.png)。但这只在本地编辑器（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#GitHub#Notion#HackMD#图片语法#技术写作
M

作者

Mia Huang

效率达人

能一步完成的事绝不分两步，专写省时省力的懒人攻略。