图片 ↔ Base64 转换
图片与 Base64 Data URL 互转,附 CSS 与 HTML 代码片段
本地运行
loading…
关于此工具
拖入、选择或粘贴一张图片,立即得到它的各种 Base64 形态:可直接使用的 Data URL、CSS background-image 声明、带真实宽高的完整 <img> 标签,以及纯 Base64 载荷。反方向同样可用——粘贴一个 Data URL 或裸 Base64 字符串,图片会被解码、预览,并可下载为文件。
格式识别依据的是文件头的魔数,而不是扩展名或声明的 MIME 类型,所以被改名成 .jpg 的 PNG(或标错类型的 Data URL)照样能正确转换。大小面板对成本毫不遮掩:Base64 会让数据膨胀约三分之一,编码后的确切大小就显示在原始大小旁边,内联是否划算一目了然。
与大多数图片转 Base64 的网站不同,这里不上传任何东西——文件用浏览器的 FileReader API 读取,在页面内完成编码。内部仪表盘的截图、未发布的产品图,或任何你不想交给陌生服务器的东西,在这里都是安全的。
常见问题
- 什么时候应该把图片内联成 Base64,而不是引用文件?
- 当图片很小(大约 10 KB 以内)、极少变动、且单独引用会多花一次 HTTP 请求时——比如图标、邮件里的 logo、单文件 HTML 文档。更大的图片用独立文件更好:能独立缓存、并行加载,也不会让 HTML 或 CSS 膨胀 33%。
- 为什么 Base64 版本比我的文件大三分之一左右?
- Base64 把每 3 个二进制字节表示为 4 个 ASCII 字符,结构上就有 +33% 的开销(外加最多两个填充字符)。服务器上的 Gzip 或 Brotli 能追回一部分,但膨胀是编码本身固有的——它用体积换取了把二进制嵌入文本的能力。
- 我能解码从样式表或 HTML 里找到的 Data URL 吗?
- 可以——切换到「Base64 → 图片」,把整段粘贴进来,连 data: 前缀一起。百分号编码的 SVG Data URL(不带 ;base64 的那种)也能解码,载荷里的换行和空白会自动剥除。结果在页面内预览,并以正确的扩展名下载。
- 除了 PNG 和 JPEG,SVG、GIF、ICO 也支持吗?
- 嗅探器认得的格式都能转:PNG、JPEG、WebP、GIF、SVG、BMP、ICO 和 AVIF。对 SVG 要说一句:它的 XML 源码直接内联往往更小、更可读——把 SVG 转 Base64 主要在引号或转义成为麻烦时才有意义。