01
1. 什么是Base64编码
Base64是一种将二进制数据转换为ASCII字符串的编码方式。它可以把图片、音频、视频等二进制文件以文本形式表示，从而能够在电子邮件、JSON、XML等基于文本的协议中传输二进制数据。它仅使用64个ASCII字符(A-Z、a-z、0-9、+、/)来表示所有二进制数据。在HTML中以Data URL方式内联插入图片，或在API响应中包含图片时非常有用。不过它的缺点是转换后体积会比原始大小增加约33%。
🖼️ Base64图片转换
将图片转换为Base64字符串，或将Base64还原为图片。
📁
点击或拖放图片到此处
了解更多
02
2. Base64图片的应用场景
Base64图片在各种Web开发场景中都有应用。在CSS中用background-image内联插入小图标，可以减少HTTP请求次数，从而提升页面加载速度。在邮件模板中，它被用于绕过外部图片被拦截的问题。当以单个HTML文件形式发布完整网页时，可以将所有图片以Base64形式包含进去。在RESTful API中，可以将图片直接包含在JSON响应里，无需单独上传文件即可传输。将Canvas API生成的图片发送到服务器时，也会使用Base64。
03
3. Data URL格式
Data URL是一种以URL形式表示文件的方案。格式为data:[<mediatype>][;base64],<data>。例如: data:image/png;base64,iVBORw0KG... mediatype为MIME类型，可指定image/png、image/jpeg、image/gif等。;base64表示编码方式，其后是实际的Base64字符串。在HTML的img标签中可以像<img src="data:image/png;base64,...">这样直接使用。在CSS中也可以用background: url(data:image/svg+xml;base64,...)的形式使用。浏览器会像处理普通URL一样处理Data URL来显示图片。
04
4. 性能优化注意事项
使用Base64图片时需要考虑性能。对于小图片(1-2KB以下)，内联插入比HTTP请求的开销更有利。而大图片由于Base64带来的33%体积增加以及解析开销，反而可能变慢。Base64图片无法利用浏览器缓存，每次都会随HTML/CSS一起下载。对于反复使用的图片，最好以单独文件的形式提供以便缓存。Gzip压缩对Base64字符串同样有效，因此请在服务器端启用它。将Base64用于装饰性图片或图标(而非关键内容)是比较合适的做法。
05
5. 安全注意事项
Base64图片同样存在安全风险。在将用户上传的图片转换为Base64并显示时，需要警惕XSS攻击。SVG图片由于可以包含JavaScript，因此尤其危险。可以通过Content-Security-Policy响应头来限制data:方案的使用。设置文件大小上限，以防止内存耗尽攻击。进行图片类型校验，只处理允许的MIME类型(image/png、image/jpeg)。应在服务器端验证是否为真实的图片文件，并检查其中是否包含恶意代码。
06
6. 各编程语言的Base64转换
大多数编程语言都原生提供Base64编码。JavaScript用btoa()进行编码、atob()进行解码，并可通过FileReader API将文件读取为Base64。Python在base64模块中提供b64encode()和b64decode()。PHP使用base64_encode()和base64_decode()函数。Java通过java.util.Base64类提供getEncoder()和getDecoder()。Node.js用Buffer.from(data).toString("base64")进行编码，用Buffer.from(base64, "base64")进行解码。读取图片文件并转换为Base64的操作，在所有语言中都能用标准库轻松实现。
常见问题
"包含Data URL"选项勾选和不勾选有什么区别？
勾选后输出结果会带上完整的data:image/png;base64,...前缀，可以直接粘贴进img标签的src或CSS的background使用；不勾选则只输出纯Base64字符串本体。
什么样的图片适合转换成Base64内嵌使用？
建议只对1-2KB左右的小图标、logo等反复出现频率不高的小图片使用，大图片转换后体积会增加约33%，且无法被浏览器缓存，加载速度反而变慢。
要解码的Base64字符串一定要带前缀才能转换回图片吗？
不一定，如果字符串已包含data:image/...;base64,前缀，工具会自动识别MIME类型并还原；若只有纯Base64数据本体，同样可以正确解码。
转换后的图片可以直接下载吗？
可以，解码得到的图片会显示预览，点击下载按钮即可将其保存为本地图片文件。
上传别人提供的图片转换时需要注意什么？
需警惕SVG等可能包含恶意脚本的文件类型带来的XSS风险，如果是用于网站展示，建议只允许image/png、image/jpeg等常见安全格式，并在服务器端做二次校验。