图片转Base64
将图片转换为Base64 data URI,可直接嵌入HTML或CSS中使用。
如何使用 图片转Base64
- 从您的设备中选择一张图片。
- 复制Base64 data URI,或直接使用生成好的CSS代码片段。
- 将其粘贴到您的HTML、CSS或JSON中。
关于 图片转Base64
本工具可将图片编码为Base64 data URI——一段以data:image/...;base64,开头的长文本字符串,其中包含了整个文件的文本形式数据。正因为它只是文本,您可以直接将其粘贴到<img src>、CSS的background-image、样式表或JSON数据中,图片便能加载显示,无需单独的文件,也不会产生额外的网络请求。本工具还会自动为您生成对应的CSS background-image代码行,方便直接使用。
编码过程通过浏览器内置的FileReader在本地完成,因此图片不会被上传。工具会显示生成字符串的长度,这一点很重要,因为Base64编码会让文件体积比原文件大约三分之一——对小图标和标志图片来说非常合适,但对大尺寸照片就不太划算了。作为经验法则,几KB以内的图片比较适合内嵌使用。
如果想反过来将data URI还原为可查看、可下载的图片,请使用Base64转图片。如果文件较大,可以先用压缩图片或图片尺寸调整工具缩小体积,让编码后的字符串保持在可控范围内。如果您要编码的是普通文本而不是图片,请参阅Base64编码。
常见问题
Base64 data URI有什么用?
它可以让您把图片以文本形式直接嵌入HTML、CSS或JSON中,无需单独的文件或额外的网络请求即可加载。这对小图标、标志图片和邮件中的图片最为实用。
Base64编码会让图片变大吗?
会,略微变大。Base64编码会让体积增加大约三分之一,因为它是用纯文本字符来表示二进制数据的。这也是为什么它最适合用于小尺寸图片。
编码时我的图片会被上传吗?
不会。编码过程通过浏览器内置的FileReader API在本地完成,文件不会离开您的设备。
我可以把结果用作CSS背景吗?
可以。本工具会自动为您生成background-image代码行——复制粘贴到样式表中即可使用。您也可以直接把原始data URI粘贴到img标签中。
支持哪些图片格式的编码?
只要是您的浏览器能读取的图片格式都支持,包括PNG、JPEG、WebP、GIF和SVG。data URI会保留原始格式,PNG格式的透明度也会一并保留。