如何使用
- 将 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 财务看板。隐私优先,本地计算零上传。
根据账户资金、风险比例、入场价和止损价计算交易仓位。所有计算在浏览器本地完成,不上传账户数据,可对比多档风险方案。
输入本金、定期投入、年化收益率和投资年限,计算复利增长结果,并用交互式图表展示本金、利息和最终总额。数据仅在本地计算。
找不到艾伦格地下室?EasyTools 提供 2026 最新红木门位置标注、钥匙刷新点及高级物资热力图。浏览器本地计算,隐私安全,永久免费。立即规划进圈路线!
泰戈 2026 最新密室地图!异常区域取消后,识别“青蓝色屋顶”建筑成为获取空投武器的唯一捷径。含自救除颤器必刷点标注,隐私安全。
维寒迪雪地 2026 攻略。标注致命“熊洞”入口、热成像瞄准镜刷新区及 Lab Camp 实验室钥匙刷新规律。避开北极熊,夺取顶级物资。
荣都 8x8 战术大图 2026 版。精准标注安全门 (Security Door) 钥匙卡位置、保险柜 (Safes) 坐标及应急呼叫器刷新点。助你快速积累金币!
图片标注模糊?EasyTools 提供支持 SVG 无损缩放与 WebP 高效导出的通用盖章工具。保留 PNG 透明背景,一键导出 JSON 坐标数据。浏览器本地处理,隐私安全,全格式兼容。
计算逻辑
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> 代码。