查看原文
其他

永不失效!整了个狠活,自制工具解锁笔记全新方式

砺心 阿虚同学 2023-08-30

阿虚同学

读完需要

9分钟

速读仅需 6 分钟

Markdown 在如今应该算是非常普遍的一种文本编辑方式了,上至笔记软件,下至日记工具,甚至很多便签软件也都支持

流行的笔记软件要是没有支持,几乎必会有大量用户提需求,实在遇到 OneNote 这种头铁软件,也耐不住用户自发开发插件来支持 Markdown 功能

▲足见Markdown对于笔记软件有多重要

Markdown 语言本身是非常简单的,3分钟看一眼就能学会真不是吹牛

但简洁、格式美观的 Markdown 为何始终没能占据主流,阿虚觉得图床问题得背大锅

多数人基本上也就是图文笔记,但相比普通笔记方式,Markdown 最大的问题就是没办法直接插入内嵌图片,想要把 Markdown 用好,几乎必然会涉及到图床的使用

而学习使用一个稳定的图床可比学习 Markdown 本身复杂太多了

▲图床另需软件+服务器等搭配

但如果你每篇文章也就插入几张图片,实际上有一个轻松解决图床问题的好方案,在众人疯狂折腾网络图床的时候,竟然鲜有人介绍

1


   

Base64原理和Markdown中的应用

这个方法其实阿虚老早之前就提有到过,即把图片转为Base64

大家应该都知道,计算机是由一系列的电路组成的,而这些电路均以二进制的形式工作(即0对应关、1对应开)

当计算机读取和显示一张图片时,图片会被转换成二进制格式的数据。二进制数据告诉计算机每一个像素的颜色和位置,颜色包含了红、绿、蓝三种基色。这些信息被组合在一起创建了一幅图像,最终呈现在显示器上

Base64 是基于 64 个可打印字符来表示二进制数据的一种编码方式,是最为流行的二进制转文本编码算法之一

那这个技术在 Markdown 中怎么能用呢?用阿虚这张头像举个例子

随便百度即可轻松找到在线免费图片转 Base64 网站,上传图片之后即可得到转码后的字符串

上面那张图片转换后是一段长达2W+字符的编码(图片越大,转换出来的编码越长)

▲相当于3800多个字

然后有意思的事就来了,在 Markdown 中我们其实是可以将转码后的 Base64 图片编码插入到图片路径中的!

这里并不是只能插入本地图片路径和网络图片路径,插入 Base64 图片编码也是可以被解析为图片的


2


   

图片转Base64代替网络图床的优缺点

简单来说这样的方式有什么好处呢?

Markdown 虽然能以本地(相对或者绝对)文件路径的形式插入图片,但这个方式十分不方便多平台同步,在不同平台都得保持相同的文件目录结构才能让图片正常显示——这才营运而生了网络图床这个需求(即把图片存储在网络上一个绝对位置)

2.1


  

网络图床的缺点

但就算你用腾讯云、阿里云OSS这类大厂对象存储做图床,能达到99.9%的稳定性,也不能说100%没问题,稳如阿里也出现过几次服务器故障

其次就算白嫖腾讯云、阿里云等对象存储做图床,一不小心被盗链,流量超额扣费问题也屡见不鲜(最关键还是你很不好排查是哪些图片导致的流量消耗)

并且几乎任何网络图床都存在图片审核,图片和谐、隐私泄露问题也是不能无视的

2.2


  

图片转 Base64 优点

而用图片转 Base64 代替网络图床,最大的好处自然是以字符的形式真正实现了图片的永久保存,阿虚之前介绍过很多网页永久保存工具(Singlefile、简悦等)其实都用到了此技术

只要你的笔记 .md 文件本体没丢,不要去修改转码后的 Base64 编码,里面的图片就不可能遗失!

并且不再担心图床流量问题,图片本身并不经网络,也无须但隐私泄露的问题

在多平台同步时也和使用网络图床一样,只用考虑 .md 文件本体,很是省心

2.3


  

图片转 Base64 缺点

当然图片转 Base64 也不是没有缺点,最大的问题就是图片转为 Base64 之后生成的字符串会非常之长,并且会随着图片越大生成的字符越长

1MB 的图片转换出来之后甚至高达 100W 多个字符,相当于 22W 个字!这会导致如果用 Base64 的方式插入过大的图片在一些 Markdown 编辑器上会无法正常显示或者编辑器卡死

阿虚测试了一个插入有1MB Base64 图片的 .md 文件,在 VScode、Vnote、Mweb、Obsidian WIN端、MarkText(较卡)、Joplin(较卡)上可以显示,在 Typora 上就只能显示为一长串的编码,iA Writer、Zettlr、熊掌记、Obsidian iOS端则是卡死

除外还有个缺点是由于是以字符的形式保存在 .md 文件本身之上的,所以必然会导致 .md 文件本身占用增大,这可能会影响你的笔记同步方案(比如印象笔记免费版限60MB/月)

简单来说,图片转 Base64 代替网络图床只适用于你一篇文章要插入的图片不多或者合计图片文件大小不太大的情况


3


   

图片转 Base64 使用建议

3.1


  

压缩图片⭐

当然 Typora 等编辑器并不是说不支持 Base64 形式插入图片,只是可能软件本身没有对长字符串读取做优化

我们通过压缩图片,缩短图片转成 Base64 后的字符长度其实可以解决上述问题

而图片压缩的方式有很多,除了缩小图片尺寸、PNG 24 降 PNG 8、最管用的还是转图片格式

而除了众所周知占用比较小的 .jpeg 图片格式,把图片转为占用更小的 .WebP 格式会是目前更好的选择(现在网站为了节省图片流量,基本都采用了此格式,如知乎、小红书等等)

<<左右滑动查看更多>>

至于图片压缩工具,可以看阿虚之前的这篇文章:

PC端推荐上述文章提到的图压这款软件,支持WIN/Mac两个平台

而移动端推荐使用谷歌的 Squoosh 的国内版(以下地址任选),通过浏览器放到桌面后会变为 PWA 版应用,使用起来和APP无异:

  • http://squoosh.cn/

  • http://squoosh.endfish.cn/

  • https://squoosh.qzxdp.cn/

虽然你也可以把GIF转为 .webp 来减小文件大小,比如利用又拍云的在线服务:https://www.upyun.com/webp

或者使用 iSparta(Win/Mac/Linux)这款完全免费的本地化转码工具:http://isparta.github.io/

但经阿虚测试,更好的GIF图片压缩工具还是能取得比 .webp 更高的压缩率,具体可以看阿虚后来更新的这篇文章:

不过如果你像阿虚一样频繁写文章,以上打开软件网站来转换的方式都略显麻烦

我基于 ffmpeg 写了一个批处理工具,并且可以添加到右键菜单快速使用,下载阿虚提供的工具之后,将文件放到一个固定位置不要变动,然后双击「添加右键菜单.bat」

然后右键图片文件的时候,右键菜单就会出现一个「Convert to Wepb」

点击之后会弹出一个窗口,需要你输入压缩率和缩放率,如果不填写则默认不进行压缩和缩放,直接双击两下回车即可快速完成转换

如果需要这个小工具,请关注微信公众号:阿虚同学,在公众号聊天窗口发送以下关键词,后台即会自动回复下载地址了:

webp

3.2


  

图片置于文末

如果你使用的 markdown 编辑器并非像 Typora 这样实时预览,那显然就会导致一个问题:插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验

这里其实也有一个解决办法,就是利用 Markdown 的高级语法——参考式链接

即在正文中,我们不添加具体 Base64 编码,而是以一个ID来代替,ID可以任意自定义:![图片描述][图片id]

注意:这里不同于一般的插入图片![](),以这个方式引用图片后面是也是方括号[]

而把具体 Base64 编码统一置于文档最底部:[图片id]:Base64 图片编码


4


   

图片转 Base64 工具推荐

你其实可以轻松通过百度找到很多图片转 Base64 在线工具网站

如果只是偶尔使用,网页工具是很方便,但如果你需要频繁调用,阿虚这里还是推荐一些工具

4.1


  

右键菜单(Win)⭐

这里首先推荐阿虚花了 2 天时间才制作出来的右键菜单转 Base64 批处理工具

请将从阿虚这里下载解压缩之后会得到的 4 个文件放到一个固定文件夹不要改动,然后双击「添加右键菜单.bat」

然后在右键菜单就会多出一个「Convert to Base64」选项,简单单击之后就可以将图片转为 Base64,并设置到剪贴板了

如果需要这个小工具,请关注微信公众号:阿虚同学,在公众号聊天窗口发送以下关键词,后台即会自动回复下载地址了:

base64

4.2


  

Quicker(Win)

如果你有在使用阿虚多次介绍过的 Quicker:https://getquicker.net/

那就简单了,直接添加以下动作即可:https://getquicker.net/Sharedaction?code=deb6fb34-0adc-4188-b6f8-08db782fe3a2


4.3


  

uTools(Win/Mac)

Mac 端阿虚实在没找到能像 Windows 一样右键快速调用的方法,不过在uTools这款工具箱软件内,也有图片转 Base64插件:https://www.u.tools/

全局呼出快速调用起来也不算很麻烦,缺点就是好像 uTools 这款工具对免费用户限制有点儿大


4.4


  

移动端(安卓/iOS)

移动端阿虚就建议直接用在线网页工具吧,通过浏览器分享将网站放到桌面之后实际使用基本上和本地 APP 无异

唯一需要注意的就是,手机端包括截屏之类的图片原图基本上都非常大,请务必先对图片压缩之后再进行 Base64 转码

压缩工具可见本文 3.1 节的推荐,谷歌的 Squoosh 网页版在移动端使用起来也是非常好用的

 

总的来说,图片转Base64 是解决 Markdown 图床问题一个很好的方案

这个方案将网络图床的流量、隐私泄露等问题转移成了图片压缩和转码的问题

文章介绍的转 webp 只是建议,并非必要。如果你的原图足够小,直接转码为 Base64 即可

只要合理控制一篇文章内所有图片合计文件大小(相当于控制文本长度),就再也无需担心 Markdown 图片丢失、失效、和谐一类的问题了

个人觉得还是相当值得在用 Markdown 软件的各位考虑的

 

如果你对 AI 感兴趣,希望拥有一个良好的 AI 交流圈子,希望有人和你分享讨论探讨经验

那就不得不再次推荐一下我和洋哥合伙的 AI 知识星球(应该是此类星球目前国内最大成员最多)

▲加入方式见这篇文章的置顶留言

除了加入就送ZelinAI Pro 版使用权(ChatGPT),在星球内你还可以找到大量志同道合的小伙伴,更是有星友无偿分享实操经验(比如利用AI二维码成功变现4位数)

星球的话是支持3天无理由全额退款的,现累计的12个专栏、50门系列课、五千篇帖子,上百篇精华帖子,就算你进来逛3天,相关资源全都打包拿走,都是可以的




您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存