在 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]
(More content here...)
[pixiv43697895]: data:image/jpeg;base64,/9j/4AAQSkZJ...

夏のにこまき

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

最后,内联图片会影响到整个页面的加载速度(页面变大了)遇到文章中有大图或者需要加载多张图片的时候应该使用 URL 方式加载。

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