图片文件与Base64(Data URI)相互转换
简单3步完成转换:
拖放图片文件或点击选择
支持格式: PNG, JPEG, GIF, WebP, SVG (建议最大10MB)
图片的Base64编码在Web开发中有以下应用场景:
将小图标或Logo图片直接嵌入HTML的<img>标签或CSS的background-image中,可以减少HTTP请求,提高页面加载速度。特别适合作为图标字体的替代方案。
不使用将多个小图片合并到一个文件的「CSS Sprite」,而是将每个图片Base64编码后嵌入CSS,管理更加简便。
某些邮件客户端会阻止外部图片加载,因此将重要图片(如Logo)作为Data URI嵌入可以确保显示。
在JSON API中发送和接收图片数据时,通过Base64编码可以将二进制数据作为文本格式处理。无需使用多部分通信,只需简单的JSON格式即可传输图片。
在Progressive Web Apps (PWA)或Electron应用中,将图片Base64编码后嵌入HTML,即使在离线环境下也能确保显示图片。
在React Native、Ionic、Flutter等跨平台框架中使用Base64编码的图片,可以统一不同平台间的图片处理方式。
Data URI(数据URI,也称为Data URL)是一种URL方案,用于将图片或字体等小文件直接嵌入HTML或CSS。它将文件内容Base64编码为文本,并作为URL的一部分表示。
Data URI采用以下格式:
data:[MIME类型];[编码方式],[编码后的数据] 示例(PNG): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
支持PNG、JPEG、GIF、WebP、SVG等浏览器支持的所有图片格式。最常见的是PNG和JPEG。
技术上没有限制,但考虑到性能和浏览器内存,建议10MB以下。实际应用中,5KB以下的小图片最有效。
Base64编码后约为原文件大小的133%(增加约33%)。例如,9KB的图片会变成约12KB的Base64字符串。
是的,透明PNG图片可以直接转换。透明信息会保留,嵌入HTML或CSS后也能正确显示透明效果。
直接粘贴到<img>标签的src属性中。例:<img src="data:image/png;base64,iVBORw0KG...">
像这样粘贴到url()函数中:background-image: url('data:image/png;base64,iVBORw0KG...');
不会,所有处理都在浏览器中完成。图片数据绝不会发送到服务器。
是的,本工具完全免费,无论商业或非商业用途都可自由使用。
Encode image data in Base64
Convert image file formats
Encode and decode Base64