图片转 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」已帮你拼好。
更新于 · 图片猫团队