Data URI
Data URI 是一种把资源数据直接内嵌进 URL 里的方案(由 RFC 2397 定义),常被叫作 data url 或内嵌资源。它的语法是 data:[媒体类型][;base64],数据,例如 data:image/png;base64,iVBORw0KG... 或 data:text/plain,Hello。这样一张图片、一段字体或一小段文本就能变成一串字符串,不再是独立文件。
它最大的用途是省掉一次额外的 HTTP 请求:把小图标、小图片写进 HTML 的 src 或 CSS 的 background,浏览器无需再去服务器单独下载。二进制数据通常用 Base64 编码以保证在文本环境中安全传输;纯文本(如 SVG)也可以不编码,只做百分号转义。常见于图标内联、邮件内嵌图片、以及打包工具把小资源转成内联形式。
使用时要注意几个误区:
- Base64 会让体积膨胀约 33%,只适合小文件,大文件反而更慢更占内存;
- 内嵌资源无法被浏览器单独缓存,每次都随页面重新加载;
- 它是「URI」而非「URL」,不指向网络位置,数据就在字符串本身里。
常见问题
Data URI 和普通图片链接有什么区别?
普通链接指向服务器上的文件,浏览器需要单独发一次请求去下载;Data URI 把数据本身写在字符串里,不访问网络,随所在的 HTML/CSS 一起加载。
一定要用 Base64 编码吗?
不一定。图片、字体等二进制数据通常用 Base64 保证安全传输;纯文本内容(如 SVG、纯文字)可以省略 base64,改用百分号转义,这样体积往往更小。
为什么不建议把大图片做成 Data URI?
Base64 会让数据膨胀约三分之一,且内嵌资源不能被单独缓存,每次都随页面重新解析加载,大文件反而拖慢首屏并增加内存占用。