图像工具

图片 Base64 编码

将图片转换为 Base64 编码，生成 Data URL，支持双向转换

选择图片
💡 使用说明
Data URL 格式：data:image/png;base64,iVBORw0KGgoAAAANS...

可直接用于 HTML img 标签的 src 属性或 CSS background-image

Base64 纯文本：iVBORw0KGgoAAAANS...

仅包含 Base64 编码字符串，需要手动添加前缀使用

什么是图片 Base64 编码？

Base64 是一种将二进制数据编码为文本的编码方式。图片 Base64 编码工具可以将图片转换为 Base64 编码字符串，生成 Data URL 格式，可以直接嵌入到 HTML 或 CSS 中，无需额外的图片文件。

格式说明

  • Data URL：完整的 Data URL 格式，包含 MIME 类型前缀，可直接使用
  • Base64 纯文本：仅包含 Base64 编码字符串，需要手动添加前缀

使用场景

  • 内联图片：将小图片直接嵌入 HTML/CSS，减少 HTTP 请求
  • 邮件模板：在 HTML 邮件中嵌入图片
  • API 响应：在 JSON 中直接包含图片数据
  • 离线应用：将图片数据存储在本地

注意事项

  • Base64 编码会增加约 33% 的文件大小
  • 建议只对小图片（< 100KB）使用 Base64 编码
  • 大图片使用 Base64 会影响页面加载性能
  • 所有处理在浏览器本地完成，不会上传到服务器

使用示例

  • HTML：<img src="data:image/png;base64,..." />
  • CSS：background-image: url('data:image/png;base64,...');

常见问题

什么情况下该把图片转成 Base64 内嵌？
适合：小于 2–3 KB 的图标、Logo、加载占位图——省一次 HTTP 请求且随文档缓存。不适合：内容图片和大图（体积 +33%、无法单独缓存、阻塞 CSS 解析）。经验法则：会出现雪碧图里的才考虑内嵌。
内嵌图片影响网页性能吗？
两面性：省请求但不缓存——每个引用页面都要重新下载整份 CSS/HTML；且 Base64 段会增大解析体积。Lighthouse 会把大段 Base64 列为优化项。折中方案：小图标用 SVG 内嵌，照片走独立文件+懒加载。
为什么转换后图片"打不开"了？
多数是用途错配：把纯 Base64 直接存成 .jpg 文件（缺少二进制头），或在 Data URI 里 MIME 类型与实际格式不符（png 写成 jpeg）。本工具输出时自动附带正确的 MIME 前缀，反向解码时也能识别类型。