🔄

Base64 图片转换器

图片 ⇄ Base64 双向转换,拖拽上传,实时预览,一键复制

📤

上传图片

拖拽图片到此处,或点击选择文件

什么是Base64图片编码?

Base64是一种用64个字符(A-Z、a-z、0-9、+、/)来表示二进制数据的编码方式。将图片转为Base64编码,就是把图片的二进制数据转换成一串可打印的ASCII字符。这种编码后的字符串可以直接嵌入到HTML、CSS或JSON中,无需额外的HTTP请求来加载图片。Base64编码后的数据体积大约会增加33%。

为什么要使用Base64图片?

将图片转为Base64编码在以下场景中特别有用:减少HTTP请求数,对于小图标可以直接内联到CSS或HTML中,避免额外的网络请求;在API接口中传输图片数据,JSON格式不支持直接传二进制数据,用Base64编码可以方便地在JSON中传输;在Canvas和WebGL中动态生成图片;在邮件和文档中嵌入图片,确保图片随内容一起传输而不丢失;在Data URI中使用,直接在浏览器中展示而无需文件。

使用方法

本工具支持双向转换:图片转Base64和Base64转图片。使用图片转Base64模式:拖拽或点击上传图片,工具自动生成Base64编码(data URI格式),点击复制按钮即可使用。使用Base64转图片模式:粘贴Base64编码字符串或完整的data URI,点击"转换为图片"即可预览并下载。

Data URI格式说明

Data URI是一种URI方案,格式为:data:[][;base64],。其中mediatype是MIME类型(如image/png、image/jpeg),base64表示使用Base64编码,data是编码后的数据。例如一张PNG图片的Data URI可能是这样的:data:image/png;base64,iVBORw0KGgoAAAANS...。这种格式可以直接用在img标签的src属性中,也可以用在CSS的background-image中。

性能考量

虽然Base64图片可以减少HTTP请求,但并非所有情况都适合使用。需要注意:Base64编码会使数据体积增加约33%,对于大图片会显著增加页面体积;Base64图片无法被浏览器缓存机制有效利用(除非缓存在CSS文件中);过多的Base64图片会使HTML/CSS文件变得臃肿,影响首屏渲染。最佳实践是:仅对小图标(几KB以内)使用Base64内联,大图片仍应使用单独的文件并配合CDN和缓存优化。

常见图片格式

PNG - 便携网络图形

支持无损压缩和透明背景,适合图标、截图、线条画等。文件头标识为89 50 4E 47(Base64以iVBOR开头)。

JPEG - 联合图像专家组

有损压缩,适合照片等复杂图像,不支持透明。文件头标识为FF D8 FF(Base64以/9j/开头)。

GIF - 图形交换格式

支持动画和256色透明,适合简单动画和小图标。文件头标识为GIF87a/GIF89a(Base64以R0lGOD开头)。

WebP - 新一代图像格式

Google开发的图像格式,同时支持有损和无损压缩,压缩率比JPEG和PNG更高,支持透明和动画。

常见问题

Base64编码后体积变大多少?
大约增加33%。因为Base64用6位表示一个字符(64种可能),而原始数据是8位一字节,所以比例是8/6 ≈ 1.333。
支持哪些图片格式?
支持PNG、JPG/JPEG、GIF、WebP、BMP、SVG等所有浏览器支持的图片格式。工具会自动识别图片类型并生成对应的data URI。
图片会上传到服务器吗?
不会。本工具完全在浏览器本地运行,使用FileReader API读取文件,图片数据不会上传到任何服务器,确保隐私安全。
什么是data URI?
data URI是一种直接在URL中嵌入数据的方式,格式为data:MIME类型;base64,数据。可以直接用在img的src和CSS的background中。
Base64图片可以用在哪些地方?
可以用在HTML的img标签src属性、CSS的background-image、JSON数据传输、邮件HTML、Canvas绘图等场景中。
大图片适合转Base64吗?
不建议。大图片转Base64后体积增加33%,且无法被浏览器有效缓存。建议只对小图标(几KB)使用Base64内联,大图片用单独文件。

🏷️ 相关标签

隐私安全图片处理图片编辑设计工具格式转换在线工具免费工具转换器