我应该将图像作为数据/ base64嵌入CSS或HTML中

Question

为了减少服务器上的请求数量,我将一些图像(PNG和SVG)作为BASE64直接嵌入到css中.(它在构建过程中自动化)

像这样:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

这是一个好习惯吗？有什么理由可以避免这种情况吗？是否有一些主要的浏览器没有数据网址支持？

奖金问题:为CSS和JS做这个也有意义吗？

Answer 1

这是一个好习惯吗？有什么理由可以避免这种情况吗？

这是一个很好的做法,通常只适用于IE兼容性无关紧要的非常小的CSS图像(如CSS精灵),保存请求比可缓存性更重要.

它有许多明显的缺点:

• 在IE6和7中根本不起作用.

• 仅适用于IE8中最大32k的资源.这是base64编码后适用的限制.换句话说,不超过32768个字符.

• 它会保存一个请求,但会改变HTML页面!并使图像无法缓存.每次加载包含页面或样式表时都会加载它们.

• Base64编码使图像大小增加了33%.

• 如果在一个压缩资源中提供服务,data:图像几乎肯定会对服务器资源造成严重压力!传统上,图像在压缩时非常耗费CPU,而且尺寸几乎没有减少.

Answer 2

这里的常见答案似乎表明,由于一系列合理的原因,这不是必需的.但是,所有这些似乎都忽略了现代应用程序的行为和构建过程.

设计一个简单的过程并不是不可能(实际上非​​常简单),该过程将遍历文件夹图像并生成包含此文件夹所有图像的单个CSS.

这个css将被完全缓存,并将大大减少到服务器的往返,这正是@MemeDeveloper正确建议的最大性能点击之一.

当然,这是黑客.毫无疑问.像精灵一样是一个黑客.在完美世界中,这是不需要的,在此之前,如果您需要解决的是:

1. 具有多个图像的页面不容易"spritable".
2. 往返服务器是一个真正的瓶颈(想想移动).
3. 速度(毫秒级别)对您的用例来说非常重要.
4. 关于IE5和IE6,你并不关心(如果你想让网络继续前进).

我的看法.

Answer 3

这不是一个好习惯.某些浏览器不支持数据URI(例如IE 6和7)或支持有限(例如IE8为32KB).

有关Data URI缺点的完整详细信息,另请参阅此Wikipedia文章:

• 数据URI方案

缺点

• 数据URI不是单独缓存其包含的文档(例如CSS或HTML文件),因此每次重载时都会下载包含文档的数据.
• 每次进行更改时,都必须重新编码内容并重新嵌入内容.
• Internet Explorer到版本7(截至2011年1月约占市场份额的15%)缺乏支持.
• Internet Explorer 8将数据URI限制为最大长度为32 KB.
• 数据作为简单流包含在内,并且许多处理环境(例如Web浏览器)可能不支持使用容器(例如multipart/alternative或message/rfc822)来提供更高的复杂性,例如元数据,数据压缩或内容协商.
• Base64编码的数据URI的大小比其二进制等值大1/3.(但是,如果HTTP服务器使用gzip压缩响应,则此开销减少到2-3%)
• 数据URI使安全软件更难以过滤内容.

Answer 4

我使用data-uri大约一个月,我刚刚停止使用它们,因为它们使我的样式表非常庞大.

Data-uri可以在IE6/7中运行(您只需要向这些浏览器提供mhtml文件).

我使用data-uri获得的一个好处是,我的背景图像在下载样式表后立即呈现,而不是我们看到的逐渐加载

很高兴我们有这种技术可用,但我将来不会使用它太多.我建议尝试一下,这样你就知道了