图片转 Base64
在浏览器中把图片转成 Base64 data URI，一键复制 data URL、纯 Base64 或 HTML / CSS 引用片段，文件不会离开你的设备。
data URI 把整张图片装进一个字符串：以 data: 协议头开头，接着是 image/png 这类媒体类型与 ;base64 标记，逗号之后则是文件原始字节的 Base64 编码——一段任何浏览器都能直接还原成原图的文本。
结果是纯 ASCII 文本，可以放进任何接受文本的地方：HTML 的 src 属性、CSS 的 url()、JSON 载荷、Markdown 文档或邮件。是运送小 Logo、图标与装饰图的便捷方式，不必单独托管文件或配置 CDN。
便利有真实代价：Base64 用四个字符存三个字节，编码结果约比原文件大三分之一，且内联图片完全绕开浏览器缓存——每个嵌入它的页面都要重新传输。除小图外，可缓存 URL 背后的普通图片文件往往是更好的工程选择。
常见用途
- 把一小组图标内联进样式表，让页面渲染时不再发起额外图片请求——在 HTML 邮件和限制加载外部资源的环境里尤其实用。
- 把截图或图表编码后附在只接受文本的 JSON API 调用、Webhook 载荷或缺陷单字段里，不必为一张图单独搭建文件存储。
- 把 Logo 直接嵌入自包含的 HTML 文件、README 或交互式演示，文档离线打开或作为单个附件分享时仍能正常显示。
常见问题
- 为什么转出来的 Base64 比原图还大？
- Base64 把每三个输入字节映射成四个可打印字符，编码结果约比原文件大 33%，data: 头部还会再添几个字节。这份开销正是只建议内联小图的原因。
- 多大的图片适合内联？
- 经验法则是只内联 10 KB 以下的小图；文件超过 100 KB 时本页会给出提醒。更大的图片会撑大每一份嵌入它的文档，又无法利用浏览器缓存，更适合托管为普通文件。
- SVG 也要转成 Base64 吗？
- 通常不必。SVG 本身就是文本，直接做百分号编码放进 data URI，结果往往比 Base64 更短且保持可读。只有当 SVG 内嵌了大段二进制内容（比如位图）时，Base64 才更划算。
- data URI 和纯 Base64 输出有什么区别？
- data URI 是可直接使用的完整字符串，包含 data: 协议头、MIME 类型、;base64 标记和负载；纯 Base64 只是其中的编码负载。HTML 和 CSS 里用完整 data URI；API 要求原始 Base64 图片数据时用后者。
- 我的图片会上传到服务器吗？
- 不会。转换通过浏览器的 FileReader API 在本地完成，像素尺寸用原生图片解码读取，文件始终不离开设备，未发布的稿件也能放心使用。