图片 Base64 和 Data URI 怎么用？
解释图片转 Base64 后如何用于 img、CSS background，以及什么情况下不适合内嵌。
打开图片 Base64 工具Data URI 是什么
图片转 Base64 后，常见结果会带有 data:image/png;base64, 这样的前缀。这整段就是 Data URI，可以直接放到 img 标签的 src 或 CSS background-image 里。
它的优点是少一次图片请求，适合很小的图标、占位图或邮件模板。
- img 使用：src="data:image/png;base64,..."
- CSS 使用：background-image: url("data:image/png;base64,...")
- HTML 邮件或小图标场景比较常见。
不要把大图都转成 Base64
Base64 会让体积比原始二进制更大，而且内嵌后不利于浏览器单独缓存图片。大图、商品图、文章主图更适合使用普通图片文件。
如果页面里有很多 Base64 大图，会让 HTML 或 CSS 文件变重，首屏加载变慢。
Base64 转回图片的注意点
转回图片时要保留正确的 MIME 类型，例如 image/png、image/jpeg、image/webp。MIME 类型错误可能导致预览或下载文件打不开。
如果只有纯 Base64 字符串，也可以根据来源补上 Data URI 前缀。
常见问题
图片转 Base64 会变小吗？
通常不会。Base64 文本体积一般比原图片二进制更大。
什么图片适合转 Base64？
小图标、小占位图、邮件模板里的小图片比较适合。
Base64 图片能被浏览器缓存吗？
内嵌在 HTML 或 CSS 中时，无法像独立图片文件那样单独缓存。