把 JPG 转成 Base64(用于 CSS 与 HTML)
把 JPEG 变成适合样式表、src 属性或 JSON 的字符串 —— 连引号都替你处理好,粘进去就能用。
图片用 FileReader 在本地读取,不会上传。
什么时候会用到
- 把一张小的装饰性 JPEG 直接写进 CSS 规则,避免一次资源请求。
- 做邮件模板 —— 外部资源托管往往不可靠。
- 生成一个自包含的 HTML 文件,用于离线评审。
别的 Base64 工具为什么在这里失败
只输出裸字符串的工具要你自己写 url("data:…") 外壳,一个引号放错整条规则就失效。
大 JPEG 的单行输出会造出几十万字符长的一行,某些编辑器和 diff 工具处理起来很吃力。
前缀里的 MIME 常被写死成 PNG,于是装着 JPEG 字节的 Data URI 声明成 PNG,可能渲染不出来。
常见问题
为什么 CSS 输出按 76 字符折行?
因为 CSS 里字符串要跨行必须转义换行符,超长单行在编辑器和版本控制里很难用。76 字符是 MIME 的标准行长,diff 也更好读。如果你的 CSS 反正要压缩,那就选单行。
JPEG 适合做 CSS 背景吗?
只有在它很小时才适合。JPEG 是有损压缩,相对 PNG 的体积优势主要体现在照片类内容上 —— 而照片类内容通常又大到不适合内联。纯色、渐变和简单图形用 CSS 本身写,在体积和画质上都优于内联任何图片。
Data URI 会影响样式表的缓存吗?
会,实际上是让图片成了 CSS 的一部分:样式表重新下载时它也跟着重下,而且不修改 CSS 就无法更新它。这正是内联资源应当保持小而稳定的主要原因。
编码时会去掉 EXIF 吗?
不会。文件按原样编码,所以任何 EXIF —— 包括位置信息 —— 都会跟着进入字符串。如果这有影响,请先处理源文件,而不是处理输出。