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 转回可下载文件。

相关工具

材质设计颜色选择器

浏览Material Design色板，单击即可将任意色号（50至A700）以HEX、RGB或 HSL 格式复制。

ARW 转 JPG 转换器

将索尼 ARW RAW 照片转换为 JPG。无需打开 Lightroom，即可从相机 RAW 文件得到一张便于分享、通用兼容的 JPEG。

ICO到PNG格式转换器

查看 ICO 中的图像，选择一个尺寸，并在浏览器中按原始大小保存为透明 PNG。

在线白板

在浏览器中的私人白板上绘制想法，排列形状、便签和本地图片。支持撤销操作，并导出 PNG、JPEG、SVG 或可编辑的 JSON。

旗帜制作器

在浏览器中使用六种布局、颜色、文字和符号设计简洁的自定义 3:2 旗帜。可下载 SVG 或 PNG，或打开浏览器打印对话框。

报纸制作工具

使用你自己的标题和文章制作报纸风格的头版，然后复制、下载纯文本，或打开浏览器打印对话框。

此工具还提供其他语言版本