主题
图片转 Base64
写一个单文件的 HTML 页面，不想再带一个图片文件；或者调接口时要把图片塞进 JSON 里传。这两种场景都需要把图片变成一串文本。
打开「图片转 Base64」看到的初始界面。在浏览器本地完成、数据不离开浏览器，免费。
它解决什么
Base64 把二进制数据编码成纯文本，于是图片可以直接内联在代码里：
html
<img src="data:image/png;base64,iVBORw0KG...">好处是少一次网络请求，页面自包含、一个文件就能跑。
代价：体积涨三分之一
Base64 用 4 个字符表示 3 个字节，所以编码后体积增加约 33%。
这带来一条明确的使用边界：
- 小图标、小背景（< 10KB） → 内联划算，省下的那次请求比多出的体积值钱
- 大图（> 50KB） → 不要内联。它会让 HTML/CSS 文件本身变得很大，而且无法被浏览器单独缓存——改一次页面，整张图要重新下载
另一个隐藏代价
内联的图片不会被浏览器缓存。同一张图出现在三个页面里，就要下载三遍。而作为独立文件时，浏览器缓存一次全站复用。
所以内联适合「这个页面独有的小图」，不适合 logo 这类全站复用的资源。
解码：从 Base64 还原成图片
反向模式。常用于：
- 接口返回了 Base64 图片，想存成文件看看
- 从别人的代码里抠一张内联图出来
粘贴时要不要带 data:image/png;base64, 前缀都可以，工具会自动处理。
支持 SVG
SVG 是文本格式，也可以 Base64 内联。但对 SVG 来说通常直接内联标签更好——<svg>...</svg> 写进 HTML 里，既不涨体积，还能用 CSS 控制颜色。Base64 编码的 SVG 就变成了一个不可控的黑盒。
浏览器本地处理
图片不上传。