在 Markdown 文件中引入图片有两种写法

Inline-style:
  ![Alternative Text](url/to/image-file.ext)

Reference-style:
  ![Alternative Text][reference]
  ...
  [reference]: url/to/image-file.ext

使用图片链接有两个缺点:

  1. URL 可能失效
  2. 显示速度较慢(需要发起新连接)

使用 Data URI 内联需要加入的图片可以优雅地解决这些问题,让 Markdown 文件更 portable。

使用小工具 image64.sh 将图片文件编码成 Data URI 的格式。编码出的图像会被拷贝到 OS X 的剪贴板里(Linux 可以参考 SuperUser 把脚本的 pbcopy 改成 xsel 命令)

编码的图像大概是下面这样:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEBLAEsA...

使用 Reference-style 写法将 Data URI 嵌入到正文中

![Natsu-no-nico-maki][pixiv43697895]
...

[pixiv43697895]: data:image/jpeg;base64,/9j/4AAQSkZJ...

夏のにこまき

使用 Vim 编辑器时推荐用 :r !pbpaste 将 Data URI 插入正在编辑的文档。不同的图片大小将会产生长短不一的 Data URI,在 iTerm 中 Command + V 的话会让 iTerm 将剪贴板的内容通过模拟输入「敲」进终端,遇到类似编码了位图的 Data URI 的长文本时候非常慢,在启用了自动补全插件的时候还可能把 Vim 卡死。

更新:Feedly 等 RSS 阅读服务可能无法识别 Data URI。