Image in Markdown

Tech

简单记录一下 Markdown 内嵌图片 的做法

在 Markdown 文件内插入图片，我们通常用 ![img label](URL Description)。

URL 指向的可以是本地地址或者服务器路径，但会造成可移植性问题。
比较普遍的方法是将图片托管在图床上。

图片经压缩后转换为 Data URL 内嵌在文档内，由编译器 / 浏览器渲染的方案，比起存放在图床，要令人安心一些。

步骤如下：

  1. 用 Squoosh 或者其他图片压缩工具先将图片压缩至网络传输友好的程度.

  2. 用 ezgif.com 或其他任意转换工具将图片转换至 Data URL 形式。

  3. 像这样插入在 Markdown 文档内：
    ![img label](data:image/...)

Base64 编码一般很长，为了易读性，可将 DataURL 定义放在文末，在文中引用，如下所示：

1
2
3
![img label][img ref]
......
[img ref]:data:image/...