图片转 Base64 工具 - 图片编码在线转换嵌入网页
Base64 编码是一种将二进制数据编码为 ASCII 字符串的方法，常用于在文本环境中传输图片数据。将图片转为 Base64 后可以直接嵌入 CSS 的 background-image 或 HTML 的 img 标签中，减少 HTTP 请求。但 Base64 编码会使文件体积增加约 33%，因此只建议对小图片（如图标、小背景图）使用这种方式。
下面介绍图片转 Base64 的原理和使用方法。
什么是 Base64 编码
Base64 是一种基于 64 个可打印字符来表示二进制数据的编码方式。在 Web 开发中，图片通过 Base64 编码后可以以文本形式嵌入到 HTML 或 CSS 中，无需额外的文件请求。编码后的格式通常为 Data URI，如 data:image/png;base64,iVBORw0KGgo...。这种方式适合体积较小的图片，大图片编码后不仅体积膨胀，还会影响页面加载性能。
核心功能
拖拽上传
拖拽或点击上传图片文件
自动编码
自动生成包含 Data URI 前缀的编码
一键复制
点击复制按钮快速获取编码结果
多格式支持
支持 JPG、PNG、GIF、WebP、SVG 等
本地处理
所有操作在浏览器本地完成
信息展示
显示图片尺寸、格式和编码长度
使用教程
- 拖拽图片到上传区域，或点击选择文件上传。
- 工具会自动生成 Base64 编码，包含完整的 Data URI 前缀。
- 点击复制按钮，将编码粘贴到 CSS 的 background-image 或 HTML 的 img 标签中。
- 建议仅对小图片使用 Base64 编码，大图片编码后体积会增大约 33%。
应用场景
- CSS 内联图片：将小图标直接嵌入样式表，减少请求
- HTML 嵌入图片：在单文件中包含完整图片资源
- 接口调试：处理接口返回的 Base64 图片数据
- 代码演示：在代码示例中直接包含图片，无需外部文件
技术原理
图片转 Base64 基于 FileReader API 实现。用户上传图片后，通过 FileReader 的 readAsDataURL() 方法将图片文件读取为 Data URI 格式的字符串。该方法会自动将二进制数据进行 Base64 编码，并添加对应的 MIME 类型前缀。编码结果可以直接用于 HTML img 标签的 src 属性或 CSS 的 url() 函数中。
常见问题
Base64 编码后图片变大了？
是的，Base64 编码会使文件体积增加约 33%，所以只建议对小图片（如图标、小背景图）使用，大图片建议保持原文件方式引用。
支持哪些图片格式？
支持 JPG、PNG、GIF、WebP、SVG、BMP 等浏览器支持的常见格式。
编码结果可以直接用在 CSS 里吗？
可以，复制后直接用在 background-image: url(...) 中即可，编码已包含完整的 Data URI 格式。
图片会上传到服务器吗？
不会，所有编码操作在浏览器本地完成，图片数据不会上传到任何服务器。
大图片适合转 Base64 吗？
不建议。大图片转 Base64 后编码字符串非常长，会增加 HTML/CSS 文件体积，影响页面加载性能。建议只对 10KB 以内的小图片使用。
可以批量转换吗？
目前支持单张图片转换，如需批量处理可以逐个上传。后续版本可能会增加批量功能。