Base64 Image Encoder / Decoder

Base64 图片编码器可将图片文件转换为 Base64 Data URI 字符串，或将 Base64 字符串解码为可预览的图片。支持所有常见图片格式（PNG、JPEG、GIF、WebP、SVG 等）。编码时使用浏览器的 FileReader API 读取文件二进制数据并转换为标准 Data URI 格式（data:image/xxx;base64,...），解码时解析 Base64 字符串并渲染为图片预览元素。

Base64 图片编码是前端开发中的常用技术。在 HTML 中内嵌小图标或 Logo 可减少 HTTP 请求数量；在 CSS 中使用 Data URI 背景图避免额外的图片文件；在生成 HTML 邮件时将图片内嵌以确保正确显示；在 JSON API 中传输小图片数据时使用 Base64 编码。

处理 Base64 编码的图片数据时，可以结合 Base64 文本编解码器 进行纯文本编码验证，或使用 图片转 Base64 工具 批量转换多张图片。

Data URI 由四部分组成：scheme（data:）、MIME 类型（如 image/png）、编码声明（;base64）和编码数据。完整的 Data URI 格式为 data:image/png;base64,iVBORw0KGgo...。与其他 Base64 编码不同，图片 Base64 明确标注了 MIME 类型，这使得浏览器和其他软件能够正确解析和渲染图片。

该工具同时支持完整的 Data URI 和纯 Base64 字符串输入。当输入纯 Base64 字符串时，工具会尝试自动识别并补全 MIME 类型，但建议使用完整的 Data URI 以确保最佳兼容性。

• 文件大小限制：Base64 编码会使图片数据增大约 33%，对于大图片（>1MB），编码后的字符串可能非常长，影响页面性能和编辑器响应速度。
• 浏览器兼容性：不同浏览器对 Data URI 的长度限制不同。IE8 限制 32KB，现代浏览器通常支持更大长度，但建议仅对小图片使用 Base64 内嵌。
• SVG 特殊处理：SVG 图片可以Base64 编码，但更好的方式是直接内嵌 SVG 代码或使用 SVG 优化工具处理。
• 缓存问题：Base64 内嵌的图片无法被浏览器单独缓存，每次页面加载都需要重新解析，不适合频繁使用的图片资源。

在需要快速将单张图片转为 Base64 格式用于原型开发、生成邮件模板或测试 Data URI 效果时使用此工具。对于批量图片处理或生产环境中的图片内嵌，推荐使用构建工具（如 Webpack 的 url-loader）或后端服务自动处理，它们可以设置文件大小阈值，仅对小图片使用 Base64 编码。