图片转 Base64 / Data URI
Base64 是把图片二进制编码成纯文本(Data URI)的处理,可直接内联到 HTML 的 <img src> 或 CSS 的 background 里,省去一次额外的图片请求。图片猫在你的浏览器本地把图片转成 Base64 Data URI,一键复制为字符串或 CSS——图片不上传任何服务器。
拖拽或点击选择文件选择 1 张图片
Base64 把图片编码成纯文本,可直接内联到 HTML <img src> 或 CSS。注意:编码后体积比原文件大约 33%,小图标最合适。
如何图片转 Base64？
- 1拖入或选择 1 张图片(小图标、小图最合适)。
- 2工具本地读取并生成 Base64 Data URI,显示在文本框。
- 3点「复制」拿到 Data URI,或「复制为 CSS background」。
为什么用图片猫图片转 Base64？
- 本地处理、不上传:图片不离开你的设备,编码全在浏览器完成。
- 省一次请求:内联的图标/小图不再单独发 HTTP 请求,首屏更快。
- 一键复制 CSS:直接复制成 background-image: url(...),贴进样式即用。
常见问题
会。Base64 把每 3 字节编成 4 个字符,体积约增大 33%。所以它适合小图标、小图内联;大图内联反而拖慢页面,直接用图片文件更好。
不会。用浏览器的 FileReader 在本地读取并编码,图片不上传任何服务器。
HTML 里把整段 Data URI 放进 <img src="data:image/png;base64,...">;CSS 里用 background-image: url("data:...")。本工具的「复制为 CSS background」已帮你拼好。
更新于 · 图片猫团队
来源、复核与边界
最近核验
2026-06-17
作者
Image-Cat editorial team
复核
Image-Cat tooling review
主要依据
- 浏览器图像解码、Canvas 画布与下载 API
- 社交平台、网页与设备的常用图片尺寸规范
- 图片由你自己提供，全程在浏览器本地处理
压缩和改尺寸可能影响画质、元数据与色彩。请保留原图，发布或打印前先确认导出效果。