图片转 Data URL

什么是 Data URL？

Data URL 是一种统一资源标识符方案，允许将小块数据以内联方式嵌入文档，就像它们是外部资源一样。Data URL 在 RFC 2397 中定义，以 data: 前缀开头，后跟 MIME 类型、可选的 ;base64 标志以及实际的负载数据。例如，data:image/png;base64,iVBORw0KGgo... 将整个 PNG 图像编码为单个文本字符串，可直接粘贴到 HTML、CSS、JavaScript 或任何其他基于文本的格式中。

由于编码后的数据是纯文本，Data URL 可以通过任何文本通道传输：HTML 属性、CSS 属性、JavaScript 字符串、JSON 字段、源代码、电子邮件和聊天消息。最常见的用途是将图像直接内联到标记或样式表中，从而省去浏览器为获取图像资源而发起单独 HTTP 请求的需要。

Data URL 与 Base64

Data URL 和 Base64 字符串密切相关但并不相同。理解它们的差异有助于您为用例选择正确的一种。

• Data URL (data:image/png;base64,...)——一个完整的 URL 方案，捆绑了 MIME 类型和 Base64 负载。您可以将其直接粘贴到 <img> 标签的 src 属性、CSS 的 url() 函数、浏览器地址栏，或任何期望 URL 的地方。
• 纯 Base64 (iVBORw0KGgo...)——仅 Base64 编码的字节，没有 data: 前缀或 MIME 类型。当消费应用程序已知内容类型并添加自己的前缀时（例如向 API 端点发送数据或在工作流中存储原始编码数据），请使用此形式。

简而言之，Data URL 是一个包装了元数据以充当 URL 的 Base64 字符串。当您希望将图像直接嵌入标记或样式表时选择 Data URL；当您将图像数据发送到 API 或使用期望原始编码字符串的系统时选择纯 Base64。

何时使用 Data URL

在许多实际情况下，将图像内联比作为单独文件提供更方便，此时将图像转换为 Data URL 是合理的选择。最常见的场景包括：

• 内联 CSS 背景图。小型背景图形、纹理和图案可以直接嵌入 CSS，省去额外的 HTTP 请求。
• HTML 邮件签名与内容。许多邮件客户端默认屏蔽外部图像；内联 Data URL 可确保立即显示。
• 单文件 HTML 交付物。需要作为单个 .html 文件分享的报告、仪表板和原型可以将每张图片内联。
• JSON 和 XML 负载。当多部分表单上传不便时，接受图片上传的 API 通常接受 Data URL 字段。
• 源代码图标。组件或库使用的小图标可以存储为 .js 或 .ts 文件中的 Data URL。
• 首屏关键图形。关键的英雄图像或徽标可以内联，在首次绘制时渲染而无需等待网络往返。

对于浏览器缓存、CDN 分发和懒加载至关重要的较大照片，请避免使用 Data URL——将这些图像保留为单独的图像文件并通过普通 URL 提供。

如何将图片转换为 Data URL

使用此工具将图像转换为 Data URL 只需几秒钟，并且完全在浏览器中完成。无需上传、无需注册、无需安装。工具解码您的图像，将其绘制到画布，然后通过 Canvas API 将其重新编码为 PNG、JPEG 或 WebP 的 Data URL。请按以下四步操作：

1. 上传图片。点击上传区或将 .jpg、.png、.webp、.gif、.bmp 或 .svg 文件拖放到此处。图像将在本地解码并显示为预览。
2. 选择输出格式。选择 PNG 可获得带透明度的无损质量，选择 JPEG 可获得更小的照片文件，或选择 WebP 获得现代高效压缩。选择 JPEG 时会出现质量滑块。
3. 生成 Data URL。点击"生成 Data URL"按钮。Data URL 字符串会出现在结果区，下方还会渲染实时预览。
4. 复制字符串。点击"复制"将 Data URL 复制到剪贴板，然后直接粘贴到 HTML、CSS 或 JavaScript 代码中。

由于每一步都使用 JavaScript 在浏览器中本地运行，您的图像永远不会被上传到服务器。这使得转换完全私密、快速，并适合敏感或机密的图像。

Data URL 的优缺点

与任何技术一样，Data URL 也有权衡。理解它们有助于您决定何时使用这种方法。

• 优点：消除 HTTP 请求，适用于小图像、单文件交付物以及外部资源被屏蔽的环境。无需任何服务器端基础设施即可工作。
• 缺点：Base64 编码会让二进制数据膨胀约 33%，内联数据无法被浏览器单独缓存，且过大的 Data URL 会拖慢 HTML 解析和 DOM 构建。

经验法则：对于几 KB 以内的图标、徽标、项目符号和装饰性图形，优先使用 Data URL。对于较大的照片，请保留原始文件并通过普通 URL 引用，以便浏览器能高效地缓存。