在 Mac 上将图片转换为 Base64
将图像转为 Base64 Data URI，可直接粘贴到 HTML、CSS 或 JSON 中。
Mac 上的图像转 Base64
App 截图，使用的是示例文件。
如何使用图像转 Base64
- 1
拖入图像
添加一张或多张图像，包括 SVG。
- 2
选择拷贝内容
Data URI、CSS 背景规则、HTML <img> 标签或纯 Base64。
- 3
点按“编码”
每张图像都会按原样逐字节编码。
- 4
粘贴
开启“拷贝到剪贴板”后，结果可以直接粘贴。每张图像的文本还会存储为一个名称带“base64”的文件，放在“下载 › OneMacTools”中带日期的文件夹里。
图像转 Base64的功能
为每张图像生成 Data URI、CSS 背景规则、HTML <img> 标签或纯 Base64，拷贝到剪贴板并存储为文本。字节按原样编码，画质毫无损失。图像较大时会提醒你，因为 Data URI 更适合小图像。
适合
- 在 CSS 中内嵌小图标
- 在 HTML 邮件中嵌入图像
- 将图像放入 JSON 或配置文件中
选项说明
- 拷贝为
- Data URI、CSS 背景、HTML <img> 或纯 Base64。Data URI 是通用形式；CSS 背景会将其包装在 background-image 规则中；HTML <img> 会将其包装在图像标签中，并以文件名作为替代文本；纯 Base64 就是编码后的数据本身。
- 拷贝到剪贴板
- 默认打开。拷贝结果，方便立即粘贴。有多张图像时会一起拷贝，以空行分隔。
最佳实践
- 数据 URI 仅适用于小图像，最好在 10 KB 左右以下。大图像会让 HTML 或 CSS 臃肿，也无法单独缓存。
- 先缩小图像：编码前先用“SVG 优化”处理 SVG，用“压缩 PNG”处理 PNG。
- SVG 很适合在 CSS 中作为图标的 data URI，因为体积小，而且在任何尺寸下都保持清晰。
- 在 HTML <img> 输出中编辑替代文本来描述图像，不要直接使用文件名。
- 请使用浏览器支持的格式，例如 PNG、JPEG、WebP 或 SVG。HEIC 数据 URI 在大多数浏览器中无法显示。
兼容
- 输入
- PNG、JPEG、GIF、WebP、SVG 和其他图像文件。
- 输出
- 每张图像生成一个包含编码结果的文本文件；如果开启了相应选项，还会拷贝到剪贴板。
- 图像不会被重新压缩，因此没有质量损失。
- Base64 比原文件大约三分之一。结果较大时，App 会提醒你。
- 过长的结果不会在 App 中显示，但存储的文件和剪贴板中的内容是完整的。
关于图像转 Base64的问题
如何在 Mac 上将图像转为 Base64？
将图像拖到“图像转 Base64”上，选择 Data URI 并点按“编码”。结果会拷贝到剪贴板，并存储为文本文件。
如何在 CSS 中使用 Base64 图像？
选择“CSS 背景”。你会得到一条包含 Data URI 的完整 background-image 规则，可直接粘贴到样式表中。
如何不用单独的文件在 HTML 中嵌入图像？
选择“HTML <img>”。你会得到一个 src 中包含图片的图像标签，凡是支持 HTML 的地方都能使用。
为什么 Base64 文本比我的图像还大？
Base64 会把每 3 个字节变成 4 个文本字符，所以体积会大约三分之一。这就是它适合小图像的原因。
转换为 Base64 会降低质量吗？
不会。文件的字节按原样编码，解码后得到完全相同的图像。
可以将 SVG 转为 Data URI 吗？
可以。支持 SVG 文件，并以 image/svg+xml 类型编码，可直接用于 CSS 或 HTML。
图像转 Base64会上传我的文件吗？
不会。图像转 Base64完全在你的 Mac 上运行，文件绝不会离开你的 Mac，离线也能用。
图像转 Base64会改动我的原文件吗？
不会。结果会存储为新文件，放在“下载 › OneMacTools”中带日期的文件夹里；除非你打开了另有说明的选项，否则原文件会原封不动。
图像转 Base64需要什么？
只需一台运行 macOS 26 或更高版本的 Mac，无需安装其他任何东西。
下一步
去除 Figma、Illustrator 和 Inkscape SVG 中的编辑器残留并对坐标取整：文件更小，外观不变。
压缩 PNG通过减少颜色将 PNG 缩小 60–80%，并保留透明度——非常适合截图、标志和图标。
占位图生成器生成 BlurHash 字符串、模糊小缩略图和平均颜色，在图像懒加载时显示。
