这样用图床，插图优雅又省心 · MarkDown 码字发文最佳实践

一人百人、五年十年，都能优雅又省心？嗯。

近期陆续遇到几个 MarkDown 码字发文棘手问题，最后却都轻松化解：

• 某张图片已用于十多篇文章，但图片有误需要更新。拿到新图，半分钟就替换完毕。
• 辛苦写了几篇文章，同步到 App 中发现加载太慢，原来是图片最好不超过 100k/张，但宽度至少 750 。几十张图片啊……眼睛一转，5 分钟就优化完毕。
• 之前的图床地址失效，图片无法显示，几年的文章都需更新配图，愁煞人。翻了翻本地图片，20 分钟就更新完毕。

想来多归功这三年的插图习惯。再看周围朋友，陆续遭遇以下插图困扰，耗于烦心琐碎而自拔不能，很是不值。

正好最近有空，分享出来助更多朋友少走弯路，也能一人百人、五年十年，都优雅从容，轻松省心：）

MarkDown 码字发文插图困扰

常在河边走，怎能不湿鞋。使用 MarkDown 码字发文，迟早遭遇以下烦恼：

好不容易找到看着不错的图床，上传图片、顺利发文，结果过段时间，图片无法显示……想重新再传，可眼瞅这乱码 URL 怎么都没法识别当初用的哪张图……不想就此不管破罐破摔，也不想花时间重新找图作图，怎么办？

总算找到满意图片，可实在太大，为了图文浏览体验必须压缩。问题来了——压缩后，本地保留哪个版本？高清压缩都保留，占空间；只保留一个，留哪个？留大的，那下回再用又得压缩一遍；留小的，那高清场合又得再找……

那看情况吧，先缩了再说。无奈烦恼也不少：得调试好多次才能找到合适参数；调试过程，难免保存导出，判断是否清晰合用，不行又得删掉重来。若是网页处理工具（比如美图秀秀），上传下载也挺烦。TinyPng 是快捷，但没法限定输出大小，比如每张 100k 以下……

越高产，新烦恼来得越快：是一篇图文一个文件夹，里头装 MarkDown 文档和所用图片；还是所有图片一个文件夹，文档一个文件夹？到底怎么管理更省心，五年十年不添堵？

团队编辑图文，各编各文各找各图。怎么做，才能提高效率，减少重复劳动？怎样做，才能便于多人调用、未来复用？

……

要解决这些怎么办的问题，先要了解 MarkDown 配图机制——

MarkDown 配图机制

传统文档，是把图片复制了一份搁文档里。 MarkDown 文档，则是把图片搁云端（俗称图床），映射在文档里。什么意思？你可以把文章想象成一个画廊，传统画廊，是把画直接放画框里；MarkDown 画廊，则是存画于线上资源库，把画投影到画框。

这样有什么好处？大大降低文档大小，轻盈畅快。且图片管理方便：既然是把画投影在画框，那理论上只要改变投影参数，比如焦距、投影距离等，就可改变画框中画面的大小、清晰程度，不需调整原画。

更大优势，是需求更复杂时，管理复杂度却变化不大：比如想让多个画框出现该画，投影过去就好，不会多占 N 倍空间；不同位置所需画面大小、清晰程度不同，调整投影参数就好；如需替换各处的这幅画，直接更换原画就好，不必挨个替换画框。

理论挺美，如何实现？需要这套习惯——

如何插图优雅又省心

1. 使用稳定且支持图片在线处理的图床

「稳定」好理解，登录才能传图的大厂图床，一般都有保障。

「支持图片在线处理」，则鲜为人知。还记得前面打的比方吗——改变投影参数，比如焦距、投影距离等，就可改变画框中画面的大小、清晰程度。实际操作，就是直接在图片地址后添加对应参数，即可简单处理图片，如限制宽高、大小，转换图片格式等。

举个例子：

本来宽 910 的图片：https://cdn.sunnyhuang.net/clipping/scientific_method.png

我希望最宽 400 ，于是在地址上加上限制宽度的参数 ?imageView2/2/w/400 ，图片地址变为 https://cdn.sunnyhuang.net/clipping/scientific_method.png?imageView2/2/w/400 即可：

这样的功能，目前好些平台都可实现。比如：

• 又拍云 https://www.upyun.com/
• 阿里云 https://cn.aliyun.com/
• 七牛云 https://www.qiniu.com/

如何高效上传文件至云端

图床上传工具繁多，为了应对愈发复杂的需求，我有以下要求：

• 支持使用原文件名，URL 能保留原语义，而非转译成数字
• 支持批量上传
• 支持设定上传前缀，以便区分不同类型内容，比如 ../share/image1.jpg & ../clipping/image2.jpg
• 支持多个存储账号，以便灵活切换个人及公司图床

左看右看，Mac GUI 工具，我目前选择 gee1k/uPic: 📤uPic is a native, powerful, beautiful and simple picture and file upload tool for macOS.。配置好后使用也方便，拖动即可上传并获取图片地址。CLI 工具，一般官方文档会有介绍，可自行查阅 。

如何获取配置上传工具所需的 Bucket 、Access Key（下文简称 AK）、Secret Key（下文简称 SK） 等账号信息，也可查官方文档。比如快速入门 - 七牛开发者中心 、怎么获取或者找到 Access Key 和 Secret Key - 七牛开发者中心。

如果你只有前俩要求，选择范围会广些。但这难保一人百人、五年十年依然优雅省心，你根据个人情况掂量吧：）

如何高效在线处理图片

如何在线处理图片，官方给出了详细的文档，比如 图片处理使用说明 - 七牛开发者中心 。

不过每次处理图片都去翻这文档、排列组合不同参数，就如定向越野，好不容易有捷径可走，结果看捷径地图比不抄近路还花时间，岂不南辕北辙？

好在办法总比困难多——我做了份 cheat sheet ，MarkDown 码字发文专用：Hb7niuImageEditOnline · OpenMindClub/Share Wiki 。

凭此 cheat sheet ，只需判断原图是什么格式、是否大于 2M ，即可选择对应参数，限制图片大小。

如果效果不满意，可直接调整 URL 参数，在浏览器中查看结果，满意后把该 URL 更新到文档中即可：

为了效率，编辑时我一般批处理：把一篇或几篇文章的图片都上传到对应位置后，再统一处理大小。增加参数时，先判断用得最多的参数，批量替换，再微调。

比如，某五个文档所用图片，多是 < 2M 的 jpg 。我便在可多文档查找替换的编辑器（比如 Atom）里，用 search in directory 批量检索出这些文档里的 .jpg) 字段，批量换成 .jpg?imageMogr2/size-limit/100k!) ，再手动修改原图大于 2M 的图片 URL 参数，改为 ?x-oss-process=image/resize,w_1000|imageslim 。

2. 图片放同一文件夹

若想未来管理省心，需要尽量把配图放同一文件夹。不仅减少存储时不必要的决策、取用时查找的麻烦，还利于应对万一。

比如对于个人博客的图片，我一般都放本地 share 文件夹，同步时选 share/ 前缀，比如 https://cdn.sunnyhuang.net/share/cardsample1.png 那些收集来的有价值的图片，则放 clipping 文件夹，选 clipping/ 前缀，比如 https://cdn.sunnyhuang.net/clipping/scientific_method.png 。

如此，万一原图床地址失效，便可直接把这俩路径下的图片立马上传新图床，再批量替换对应文档里的图片主域名。比如把 cdn.sunnyhuang.net 替换成新域名即可。

团队使用同理。再借本地同步盘，同步对应文件夹就好。这样一来，新人初来乍到，也能平滑接入，使用原有片源、贡献新片源。

需要注意的是，此处所用并非云盘，是本地同步盘，能实时同步本地指定文件夹的那种。Dropbox、坚果云、亿方云等都可实现。

3. 图片名用英文标注绝对属性

为何命名要用英文，见我老文 《命名用英文，烦恼少大半 · 团队文档命名指南》。

成，那就不用中文。于是有朋友这么来给图片命名 2017-11-09-l-stone-0-3-pic4-new.jpg ……

这有什么后果？如果只是个人文章，未来几乎不会再用这些图，你也不计较识别时得多花点时间点开预览，都好说。但如果发生在团队图库呢？同事若想使用，是不是就得翻看到底是啥，逐个查阅确认？假设每张图得花 1.5s 预览，每天由于名称无法马上识别得多预览 10 张图，10 位同事得多花多少时间？100 位同事呢？……好心情和心流都是被这些琐碎小事给打飞的……

那图片怎样命名，才不易给自己和团队找事？

以绝对属性而非相对属性命名，令图片树状排列。具体来说，命名规则为 绝对属性主题代号+图片序号。

为什么要这样？相信你多少有体会，团队文件管理，最好少用文件夹、减少层级降低管理复杂度。那文件怎么分类？最好以名称字母自动排序区分各主题文件。若大主题下还想细分，则在大主题代号后加细分名称。如「家庭场景画面」为 family，「有爸爸的家庭画面」，命名则在 family 后加 dad ，即 familydad 。

如果还没感觉，可瞅瞅这个例子：

- 序号 1~9999
- 主题代号举例
	- family 家庭场景
		- familydad 有爸爸的家庭画面
		- familymom 有妈妈的家庭画面
		- familyplay 家庭玩耍
	- housework 做家务
	- injury 受伤场景
	- learning 学习场景
	- object 物品
		- objectcup 水杯
		- objectbag 书包
		- objecttoy 玩具
	- unhappy 不开心的场景
		- unhappydad 不开心的爸爸
		- unhappyparents 不开心的家长
	- book 图书封面：
		- 规则：`book_书名首字母缩写`
		- 注意：有英文名的优先使用英文名，没有的话用中文名首字母缩写
		- 举例：《The Very Hungry Caterpillar》 封面图片命名 `book_tvhc`

如果你们团队作业，还请不要轻易改动里头的文件名。毕竟改动后，就难快速在 MarkDown 文档里搜出这此图。此外，保存图片尽量清晰大图，以便未来用于其它场合（比如易拉宝、网站等）。

FAQ

新文件会覆盖原图不？

为了你少出乱子，大部分平台默认上传策略不能覆盖原图。所以如果你想剪裁图片后再上传，最好修改文件名，比如在文件名后加1。

实在不想更改图片地址，只想直接显示新图，也成——可自行检索 七牛（或其他对应平台名称） 上传策略 覆盖 等关键词解决。反正我瞅了瞅就溜回来改文件名重新上传了，祝你好运：P

如何拥有优雅的图床域名？

标准用户新创建存储空间后，会获得这类*.bkt.clouddn.com 系统自动生成的测试域名。

如果有条件，建议在中国大陆备案一个域名，图床专用。这样就可以自定义七牛空间域名 ，更稳定，图片 URL 也更干净清晰。

文章发到公众号和自建网站，如何不必重复传图？

在 MarkDown 编辑器写完图文，想一键排版到公众号，可参考 markdown 高效撰写微信公众号文章 - 简书 。

划重点：在 MarkDown Here 渲染后，「剪切排版内容，再粘贴」，并等一会儿，图片才能正常显示。

如果你嫌原配的 CSS 丑，可以自己改，或直接用别人改好的。后者在网上能搜到不少，比如 huanxi007/markdown-here-css。 。

团队如何优雅共用图床空间？

以七牛为例。七牛不支持团队账号，登录即有最高权限。这要是谁手滑改了什么配置，岂不乱套？

莫担心，还记得你前面获取的 AK SK 等配置信息吧？每个标准账号可设置两对 AK SK ，以及 N 个不同空间——不同角色使用不同的配置信息就好。

比如内容同事使用 AK_1 SK_1 和 content_1 空间，内容志愿者使用 AK_2 SK_2 和 content_1 空间；这样即使换了一届志愿者，想保证信息安全，直接更新 AK_2 SK_2 为 AK_3 SK_3 就好。如果还有团队也想用 content_1 空间，并想来单独一套 AK SK ，可把空间授权别的账号读写，这样你就可以有多对 AK SK 了，详见空间授权 - 七牛开发者中心 。

星移斗转，工具必会推陈出新，但省心原则大体如上。

工具使用问题请自行检索或联系客服，习惯疑问欢迎留言交流。

愿你也远离烦心琐碎，多多拥抱心流：）