摘要
尽管 data URI 可以优化性能,但在替换所有 JPEG 图片前应考虑体积增大和缓存不足等缺点。
data URI 允许你直接将小文件比如图片编码为字符串,而不是链接到外部资源。一些开发者探索了将所有的 JPEG 图片引用替换为内联 data URI 的做法。在这篇文章中,我们来看看全面使用 data URI 而不是传统图片文件的利与弊。
什么是 data URI?
一个 data URI 可以将图片、CSS 和 JavaScript 等文件内容直接编码为一个字符串,而不是引用外部文件:
1data:[<media type>][;base64],<data>
例如,一个小的 PNG 图片可以表示为:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAY...
浏览器可以像渲染外部文件一样渲染这些 data URI 字符串。这避免了额外的 HTTP 请求。
data URI 可以用于任何文件类型,如图片、SVG、字体、HTML、CSS 和 JavaScript 代码。但它们最常用于小图片和图标。
使用 data URI 的优点
使用 data URI 的一些潜在优势:
- 消除了对外部资源的 HTTP 请求
- HTML 页面包含内联文件,自成一体
- 没有网页服务器的更简单的路径和访问控制
- 避免 canvas、WebGL 纹理等的跨域问题
对于生产网站,内联小资源可以通过减少请求来优化性能。
对于测试和开发,data URI 简化了无需资源服务器的本地工作。
data URI 的缺点
然而,全面使用 data URI 有一些需要注意的缺点:
- 编码会增加 HTML 和 JavaScript 的大小
- 无法利用浏览器缓存外部文件
- 不兼容 IE 6/7 和一些老版本浏览器
- 未来更难更新资源
data URI 中使用的 Base64 编码会使文件大小比二进制文件大约增加 33%。因此内联所有图片可能会明显增加页面体积。
data URI 也无法利用 CDN 或外部静态文件的边缘缓存。
data URI 适用的场景
有一些场景下 data URI 很理想:
- 非常小的图标图片
- 图标和 SVG 图片
- 作为外部资源失败时的回退
内联几 KB 大小的小图片是一个简单的优化。
data URI 对于需要离线工作或有可预测性能的图形和 UI 元素也很有用。
优化 data URI 的使用
优化使用 data URI 的一些方法:
- 仅用于小于特定大小阈值的静态资源
- 使用构建工具自动内联过程
- 为更大的资源 fallback 到正常文件
一般来说,你需要避免内联大图片和文件。任何超过几 KB 的应该保持为正常的资源请求。
data URI 的替代方案
还有一些可以实现类似优势的替代技术:
- CSS 精灵 - 将图片组合成一个文件
- 图标字体 - 将图标编码成字体
- SVG 图片 - 小的矢量图形格式
- 内容分发网络 - 分布式缓存层
每种方法在特定使用场景下都有权衡需要评估。
总结
在某些情况下,data URI 可以通过消除资源请求来优化性能。但在替换所有正常的图片引用之前,应考虑编码体积增大和缺乏缓存的缺点。
特别是 JPEG 文件并不是内联的理想格式。其压缩机制已经使其非常紧凑,Base64 编码会导致明显的体积增大。
一般来说,data URI 最适用于几 KB 大小以下的静态元素。它们可以简化开发,但可能不是所有生产场景的最佳选择。与任何优化一样,在浏览器和连接上进行彻底的测试是明智的。
