图片Base64编解码
使用FileReader API实现图片与Base64编码的相互转换
选择图片文件
上传图片自动生成 Base64 编码
点击选择或拖拽图片到此处
支持 PNG / JPEG / WebP / GIF / SVG 等
图片 Base64 编解码说明
本工具使用 FileReader API 在浏览器本地实现图片与 Base64 编码的相互转换，支持拖拽上传。
编码原理：通过 FileReader.readAsDataURL() 读取图片文件，生成 data:image/xxx;base64,... 格式的 Data URL，该字符串可直接嵌入 HTML/CSS 中使用。
解码原理：将 Base64 Data URL 字符串赋值给 Image.src，浏览器自动解码为图片并渲染显示。
Data URL 格式：data:[<mediatype>][;base64],<data>，其中 mediatype 为 MIME 类型（如 image/png），data 为 Base64 编码的二进制数据。
体积膨胀：Base64 编码会将每 3 字节数据编码为 4 个字符，因此体积会膨胀约 33%。再加上 Data URL 前缀，总大小约为原文件的 1.37 倍。
使用场景：将小图片内嵌到 HTML/CSS/JS 中减少 HTTP 请求、在 JSON/API 中传输图片数据、邮件内嵌图片、CSS Sprites 替代方案等。
注意事项：Base64 编码的图片无法被浏览器缓存（除非缓存包含它的文件），大图片使用 Base64 反而会降低性能，建议仅对小图标（<10KB）使用内联 Base64。