图片转 Base64
将任意图片拖入这个图片转 Base64 转换器，即可获得 Data URI 以及可直接粘贴的 HTML、CSS 和 JavaScript 代码片段。内联图片可为小图标节省 HTTP 请求，对单文件 HTML、电子邮件模板和离线应用而言必不可少。
图片文件
将图片拖放到此处或点击选择
如何在线转换 图片转 Base64
- 选择图片文件或粘贴图片 URL。
- 选择输出：Data URI、
<img>、CSS 背景、favicon、JSON 等。 - 点击图片编码为 Base64。
- 预览图片并复制代码。
更多 图片转 Base64 转换器
输出格式
选择结果的包装方式。转换器可以输出：
- txt: 仅 Base64 字符串，可直接粘贴到代码、数据库字段或 API 请求中。
- uri: 完整的
data:URI，可粘贴到浏览器地址栏，或用于任何接受 URL 的地方。 - html img:
src中包含 Data URI 的<img>标签。 - css background image: 使用
background-image: url(data:...)的 CSS 规则。 - html favicon: 用于内联 favicon 的
<link rel="icon">标签。 - html hyperlink: 用于下载或打开嵌入文件的
<a>链接。 - html iframe: 以内联方式渲染内容的
<iframe>。 - javascript image: 创建
Image对象的 JavaScript 代码。 - javascript popup: 在新窗口中打开内容的 JavaScript 代码。
- json: 包含文件名、MIME 类型和数据的 JSON 对象。
- xml: 数据位于 CDATA 区段内的 XML 元素。
什么时候应该将图片内联为 Base64？
将图标、徽标和占位图等小图片（约 5–10 KB 以下）内联可节省请求。避免内联大照片：它们会使 HTML/CSS 变得臃肿，无法单独缓存，还会延迟渲染。详细讨论请参阅 Data URI 详解。
常见问题
如何将图片转换为 Base64？
选择图片，输出格式选“Data URI”或“<img>”，然后点击“图片编码为 Base64”。将结果复制到 HTML 或 CSS 中即可。
支持哪些图片格式？
浏览器可读取的任意格式：PNG、JPG/JPEG、GIF、WebP、SVG、BMP、ICO、AVIF、TIFF 等。
如何在 HTML 中使用 Base64 图片？
将 Data URI 放入 src 属性中：<img src="data:image/png;base64,iVBORw0KGgo..." alt="">。
评论 (0)
对“图片转 Base64”有疑问、想法或发现了 bug？欢迎留言评论、为工具评分或回复他人。
暂无评论，快来分享您的反馈吧！