如何使用
- 将 PNG、JPG、SVG、WebP 或 GIF 图片拖到上传区，或点击选择文件。
- 在预览区确认图片、MIME 类型、原始大小和 Data URI 大小。
- 按需复制完整 Data URI、纯 Base64 字符串、CSS
background-image或 HTML<img>代码。 - 将代码粘贴到 CSS、HTML、邮件模板或 JSON 配置中。
示例：点击“载入 SVG 示例”，工具会生成一个本地 SVG 图标并转换为 Data URI，你可以直接复制 CSS 或 HTML 片段。
核心功能
- 即时生成 Data URI：拖入图片后在浏览器中生成
data:image/...;base64,...，可直接用于前端代码。 - CSS 与 HTML 代码片段：一键复制 CSS
background-image或 HTML<img>标签，不必手写前缀。 - 支持常见 Web 图片格式：可处理 PNG、JPG、SVG、WebP、GIF、AVIF 等浏览器可读取的图片。
- 批量图片队列：一次拖入多张小图标或邮件素材，逐个预览并复制需要的代码。
- 100% 本地隐私：图片通过原生
FileReader在当前设备读取，不上传到服务器。
相关工具
2026 最新 FIRE 财务自由计算器(剔除通胀版)。拒绝虚高数字，精准模拟实际购买力下的复利增长。支持 4% 法则验证与养老金缺口反向推算。支持一键导出 CSV，完美适配 Excel 或 Notion 财务看板。隐私优先，本地计算零上传。
根据账户资金、风险比例、入场价和止损价计算交易仓位。所有计算在浏览器本地完成，不上传账户数据，可对比多档风险方案。
输入本金、定期投入、年化收益率和投资年限，计算复利增长结果，并用交互式图表展示本金、利息和最终总额。数据仅在本地计算。
使用 Loan Calculator / Mortgage Calculator 在浏览器本地计算月供、总利息与还款明细。输入贷款额、年利率和期限，立即查看图表与还款计划表。
使用 Investment Calculator / ROI Calculator 在浏览器本地估算初始本金、每月定投、年化回报率和通胀后的投资结果。立即查看复利图表、本金/收益拆解、ROI 与年度明细。
使用 APR to APY Calculator 在浏览器本地完成 APR/APY 双向换算。输入利率并选择复利频率，立即查看有效年利率、差值和多频率对比表。
使用这款利润率计算器在浏览器本地计算毛利、Margin 和 Markup。输入成本和售价，或输入成本与目标毛利率，立即推算售价并避免把加价率误当利润率。
使用 CPM 与 CPC 计算器在浏览器本地测算广告花费、展示量、点击量、CPM、CPC 和 CTR。输入预算与目标成本，快速推演可获得的曝光或点击。
计算逻辑
Base64 会把二进制图片数据编码成 ASCII 字符串，因此可以直接嵌入 HTML、CSS 或 JSON。Data URI 的基本结构是 data:[mime-type];base64,[encoded-data]，浏览器可以把它当作图片资源读取。
需要注意：Base64 不是图片压缩。编码后体积通常会增加约 33%，因此更适合小图标、Logo、邮件内联图片或减少少量 HTTP 请求的场景；大照片和大量素材通常仍建议使用普通图片文件并配合压缩工具。
常见问题
为什么要把图片转成 Base64？
常见用途是把小图标、邮件图片或配置中的小型图片直接嵌入代码，减少外部请求或避免邮件客户端拦截远程图片。
Base64 会压缩图片吗？
不会。Base64 编码通常会让体积增加约 33%。它优化的是嵌入和请求数量，不是图片存储大小。
支持哪些图片格式？
支持 PNG、JPG、JPEG、SVG、WebP、GIF、AVIF 等浏览器能读取的图片格式。
我的图片会上传吗？
不会。转换使用浏览器原生 FileReader.readAsDataURL 完成，图片不离开当前设备。
可以直接复制 CSS 或 HTML 吗？
可以。每张图片都会生成完整 Data URI、纯 Base64、CSS background-image 和 HTML <img> 代码。