Data URL

最新推荐文章于 2026-04-24 13:22:38 发布

原创最新推荐文章于 2026-04-24 13:22:38 发布 · 6.2w 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Other

DataURI是一种在网页中直接嵌入小规模数据的方式，通过MIME类型指定内容类型，可选地使用base64编码。虽然base64编码可以缩短文本内容，但对于图片，base64编码后的大小通常会比原图gzip压缩后更大。本文探讨了DataURI的使用场景、编码设置及其在不同字符集下的表现，并提醒在使用时需要考虑数据体积的增加。

Data URI

使用 data URI 来呈现一些较长的内容，

如一串二进制数据编码、图片等，采用 base64 编码可以让内容变得更加简短。
而对图片来说，在 gzip 压缩之后，base64 图片实际上比原图 gzip 压缩要大，体积增加大约为三分之一，所以使用的时候需要权衡。

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

data: 协议头，它标识这个内容为一个 data URI 资源。
MIME 类型，表示这串内容的展现方式，
- 比如：text/plain，则以文本类型展示，
- image/jpeg，以 jpeg 图片形式展示，
- 同样，客户端也会以这个 MIME 类型来解析数据
编码设置，默认编码是 charset=US-ASCII,
- 即数据部分的每个字符都会自动编码为 %xx，
- 关于编码的测试，
- 可以在浏览器地址框输入分别输入下面两串内容
  - data:text/html,你好
    - 输出：浣犲ソ
  - data:text/html;charset=UTF-8,你好
    - 输出：你好
  - data:text/html;charset=gbk,你好
    - 输出：浣犲ソ
  - data:text/html;charset=UTF-8;base64,5L2g5aW9
    - 输出：你好
base64 编码设定，这是一个可选项，base64 编码中仅包含 0-9,a-z,A-Z,+,/,=，其中 = 是用来编码补白的。
Data URI 承载的内容，它可以是纯文本编写的内容，也可以是经过 base64编码的内容。