Softonic

Base64 图像编码器

步 1 / 3 将图片拖到这里

正在处理……

把小图作为 Base64 data URI 内联，可能省掉一次 HTTP 请求，并让素材随 HTML 或 CSS 一起传输。编码器接受不超过 5 MiB 的受支持 PNG、JPEG、GIF、WebP 和 SVG。解码后的位图任一边不得超过 16,384 像素，总像素数不得超过 33,554,432。位图会在浏览器中验证能否解码，SVG 则只检查 UTF-8 结构，随后生成 Base64、CSS、HTML 或 JSON。请在目标系统中测试兼容性，并把不可信 SVG 视为编码后仍可执行的主动内容。

如何编码图像

  1. 1

    拖入你的图像

    请选择不超过 5 MiB 的 PNG、JPG、GIF、WebP 或 SVG 文件。位图任一边不得超过 16,384 像素，总像素数不得超过 33,554,432；编码文本需保持在 7 MiB 以下。

  2. 2

    编码在浏览器中运行

    读取图像字节，进行 Base64 编码，并加上正确的 `data:` URI 头部。

  3. 3

    选择输出格式

    原始 Base64、CSS `background-image` 规则、HTML `<img>` 标签，或 JSON 安全字符串。

  4. 4

    复制结果

    确认目标系统支持 data URI、允许相应大小且内容安全后再粘贴。

什么时候内联图像值得

适合内联的候选：

  • 2 KB 以下的图标, 以极小开销节省一次 HTTP 请求。
  • 邮件模板 - 各邮件客户端对数据 URI 的支持并不一致。请测试目标客户端，并在需要时使用 CID 或托管图片。
  • 首屏占位图（LQIP）, 低质量模糊版本内联，完整图像稍后加载。
  • 只使用一次的 SVG, 正确进行百分号编码的非 Base64 data URI 可能更短；必须编码保留字符，并继续把不可信 SVG 当作主动内容。

不适合的候选：

  • 大图像，500 KB 图像膨胀 33%，就是浪费 166 KB。
  • 跨页面复用的图像，内联会让浏览器无法在路由之间复用缓存。
  • 关键 CSS，内联大图会撑大关键渲染路径。

大小预期

图像大小 Base64 字符串大小
500 字节 约 680 个字符
2 KB 约 2.7 KB
20 KB 约 27 KB
200 KB 约 270 KB

Data URI 格式

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • data: 方案
  • MIME 类型
  • ;base64, 标识
  • 编码后的字节

SVG 是特殊情况

SVG 本身是文本，但它与 Base64 的大小比较取决于内容以及需要百分号编码的字符数量。非 Base64 形式应使用 data:image/svg+xml,，并正确编码保留字符。常见的 ;utf8 不是标准参数，也不能代替百分号编码。本工具不会预览 SVG，只检查 UTF-8 结构，因此不可信 SVG 仍是主动内容，Base64 也不是净化措施。

常见问题

Base64 在计算 data URI 包装和传输压缩之前，会让二进制数据增大约三分之一。不存在总是更划算的固定大小阈值；请比较请求数、缓存、压缩和复用频率，并在真实页面上测量。

data URI 本身不会自动带来 SEO 优势。搜索引擎处理周围的 HTML，而 CSS 背景没有类似 alt 属性的文字替代。图像传达信息时，应使用带恰当替代文本的 <img>，并单独评估性能。

不会。编码器使用 FileReader API 在本地读取文件，并在浏览器中生成 Base64 字符串。没有内容会离开你的机器。

可以。使用 Base64 to Image 工具，把 data:image/... URI 转回可下载文件。

相关工具

GIF 制作器

将一组图片或短视频转换为动画 GIF。导出前可调整帧率、循环次数和尺寸。

图片尺寸调整器

将图片调整到精确的像素尺寸或百分比，同时保持宽高比。适合批量准备图片，无需上传。

图像放大器

使用 AI 超分辨率或经典插值，将低分辨率图像放大 2×、3× 或 4×，同时保留重要细节。

SVG 转 PNG

在浏览器中将 SVG 文件或 SVG 标记转换为 PNG，选择缩放因子，并保持透明边缘清晰。

BMP 转 PNG

在浏览器中将 BMP 文件转换为 PNG。无损，保留色深，并可从原始 BMP 的 alpha 通道添加可选透明度。

PNG 转 SVG 矢量化工具

在浏览器中把 PNG 栅格图像转换为 SVG 路径。适合徽标、图标和线稿。可控制阈值、颜色数量和平滑度。