图片预览与信息
原始Base64字符串
Base64-encoded data (no prefix)
数据URI
Complete data URI (data:image/...;base64,...)
CSS背景
CSS background-image property
HTML图片标签
Ready-to-use <img> element
即时将任意图片转换为Base64字符串。获取数据URI、CSS背景代码片段和HTML img标签——全部在浏览器中本地处理，无需服务器上传。
Base64编码是一种使用64个可打印字符将二进制数据转换为纯ASCII文本的方法。应用于图片时，生成的文本字符串表示整个图像文件。该字符串可直接嵌入HTML的 <img> 标签的 src 属性，嵌入CSS的 background-image 属性，或用于API通信的JSON负载中。编码使用字符A-Z、a-z、0-9、+、/，并使用 = 作为填充。每3字节二进制数据会产生4个Base64字符，使编码结果比原文件大约33%。
A data URI（统一资源标识符）使用语法 data:[mediatype];base64,[data] 将文件内容直接嵌入URL本身。对于图片而言，这意味着可以在HTML或CSS中直接包含整个图像，而无需在服务器上单独的文件。这样可消除一次HTTP请求，对图标、徽标和UI精灵等小图片有益。缺点是data URI会增大HTML或CSS文档的体积，浏览器无法单独缓存，并且大小约比原始二进制文件大三分之一。一般而言，5-10KB以下的图片适合作为内联嵌入，而更大的图片应作为独立文件并使用适当的缓存头，以获得更好的整体性能。
虽然消除HTTP请求可以加快页面初始渲染，但将大图片嵌入为Base64字符串会带来多项缺点。HTML或CSS文件体积会显著增大，导致初始文档下载延迟。浏览器无法将图片单独缓存，只能随文档一起缓存。而33%的体积开销意味着相比直接提供二进制文件会传输更多数据。对于关键渲染路径，小型内联图片可以通过避免阻塞请求来降低感知加载时间。但对于内容图片、主视觉横幅或任何超过几KB的图片，使用CDN缓存的优化二进制文件以及WebP、AVIF等现代格式会提供更佳性能。应有策略地将Base64编码用于小且频繁使用的资源，以减少请求次数。