前段时间想做个梗图 意外发现了一种新的web图片格式
本来是想偷图片来着 结果f11检查了是个遮罩层 我还编辑不了 因为我试图修改路径的时候它显示
虽然最后偷完了 但是 这是什么
<img src="data:image/png;base64,[这里是一串超级超级长的base64编码]">
这是什么？ base64编码图片
先说结论：这堆编码字符来二进制存储图片信息。技术上 适合存储仅单次使用 来用于优化网页单 次出现的较小复杂ICON
在web上 图片显示一般有几种手段
调用图片 js/css画图实现 base64图片
base64图片是以二进制编码存在网页文件上的
欸 那是不是很牛逼啊 毕竟是二进制存储？
并非啊
base64用的可打印ASCII字符 本来rgb的255,255,255就三个字节，但是可打印的ASCII可没这么大，最后就变成需要多1个字节 4个字节 vs 3个字节 是根本打不赢png和jpg的效率差了1/3 基本上要133%
那真的就一无是处了吗？我们还是能给他找个优势区间的：总所周知，网页调用图片是要从图源网站拉取的，而向图源申请图片是需要一次TCP请求的，理论上来说 网页文件直接用base64存储图片是不用再进行这个TCP请求的。只要base64图片能比这个请求的开销小，它就是有价值的
那详细多小呢 根据阿里Alloyteam团队规范明确建议"小于2KB" 也就是差不多50*50有效像素的图片
那就很明确了 最后来点碎碎念吧
说实话 有点白银了这个技术 甚至可以说有点为用而用的技术 属于小杯优化技术 往上打不过最泛用的png 往下打不过svg和矢量 连app的ICON都用上128*128的今天 这玩意的用途真的挺迷惑的
那就真的是个小杯技术吗？
我说未必 起码你f11修改代码做效果图的时候
这玩意不用拉图种直接本地渲染了 也就是说不会有跨域问题 拿来修改网页做预览还不赖 但是你得承担图片转base64的性能开销就是了