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的操作，在所有语言中都能用标准库轻松实现。