我正在尝试确定包含我编写的脚本所需的图像的最佳方式。
我发现了 this site这让我想到尝试使用这种方法将图像包含为 data URI (由 RFC 2397 定义)因为它太小了 - 它是一个 1x1 像素 50% 不透明度的 png 文件(用于背景) - 它最终以 2,792 字节作为图像而作为 CSS 中的文本 3,746 字节。
那么这会被认为是好的做法，还是会不必要地弄乱 CSS？
最佳答案
使用数据 URI 而不是图像是有充分理由的。
Data URI 是 base 64 编码的，这意味着它比图像大 25% 左右。然而，您的 CSS 文件可以被缓存，所以小的尺寸增加可能不是一个大问题。
如果您有很多图像，则在名称解析和将图像作为另一种资源方面进行查找都会产生开销。
所有这一切意味着，如果图像很小，整个 CSS 文件仍然很小，并且 CSS 在经常访问的页面之间共享，那么如果切换到数据 URI，您将获得性能提升。
缺点是它们只适用于 FX、Chrome 等。部分适用于 IE8，但仅适用于小图像。它们在 IE7 或更低版本中根本不起作用。
关于css - 在 CSS 中使用图像文件与数据 URI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1469604/