我应该将图像作为data / base64embedded到CSS或HTML中

为了减less服务器上的数量请求，我已经将一些图像（PNG和SVG）作为BASE64直接embedded到CSS中。 （它在构build过程中是自动的）

喜欢这个：

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

这是一个很好的做法吗？ 有什么理由避免这种情况？ 有没有数据url支持的主要浏览器？

奖金的问题：这是否有意义为CSS和JS呢？

Answer 1

这是一个很好的做法吗？ 有什么理由避免这种情况？

通常，只有在IE兼容性不重要的情况下，才会一起使用的CSS图像（如CSS sprites）才是一个很好的做法，保存请求比caching更重要。

它有一些显着的缺点：

• 在IE6和7中完全不起作用。

• 适用于IE8的资源只有32K 。 这是在base64编码之后应用的限制。 换句话说，不超过32768个字符。

• 它保存了一个请求，而是膨胀了HTML页面！ 并使图像无法caching。 每次载入页面或样式表时，它们都会被加载。

• Base64编码使图像大小增加了33％。

• 如果在gzip资源中提供服务， data: images几乎肯定会对服务器资源造成严重的压力！ 图像传统上是非常CPU密集的压缩，大小减less很less。

Answer 2

这里的共同答案似乎表明这是不需要的，出于一系列合法的原因。 但是，所有这些似乎忽视了现代应用程序的行为和构build过程。

devise一个简单的过程，并不是不可能的（而且实际上也很容易），它将遍历一个文件夹图像，并将生成一个包含该文件夹所有图像的单个CSS。

这个CSS将被完全caching，并将显着减less服务器的往返次数，正如@MemeDeveloper正确提示的最大的性能命中之一。

当然，这是破解。 毫无疑问。 和精灵一样是黑客。 在完美的世界中，这是不需要的，在那之前，如果你需要解决的是一个可能的做法：

1. 页面中有多个图像不容易“精灵”。
2. 往返服务器是一个实际的瓶颈（想想移动）。
3. 速度（毫秒级别）对于您的使用情况确实非常重要。
4. 你不关心IE5和IE6（如果你想让网站前进的话）。

我的看法。

Answer 3

这不是一个好的做法。 某些浏览器不支持数据URI（例如IE 6和7）或支持有限（例如，IE 8为32 KB）。

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

• 数据URIscheme

缺点

• 数据URI不是从其包含的文档（例如CSS或HTML文件）中分别caching的，因此每次包含文档被重新下载时都会下载数据。
• 内容必须重新编码，并在每次更改时重新embedded。
• 通过版本7的Internet Explorer（截至2011年1月的市场约占15％）缺乏支持。
• Internet Explorer 8限制数据URI的最大长度为32 KB。
• 数据包含在一个简单的stream中，许多处理环境（如Web浏览器）可能不支持使用容器（如multipart/alternative或message/rfc822 ）来提供更高的复杂性，如元数据，数据压缩或内容协商。
• Base64编码的数据URI的大小是其二进制等同值的1/3。 （但是，如果HTTP服务器使用gzip压缩响应，则此开销降低到2-3％）
• 数据URI使安全软件更难以过滤内容。

Answer 4

我使用了数据库大约一个月的时间，而我刚刚停止使用它们，因为它们让我的样式表非常庞大。

Data-uri的工作在IE6 / 7（你只需要为这些浏览器提供一个mhtml文件）。

我使用data-uri的一个好处是，一旦样式表被下载，我的背景图片就会呈现，而不是我们看到的逐渐加载

很高兴我们有这个技术，但是我将来不会使用这个技术。 我build议您尝试一下，只是让自己知道

Answer 5

我更倾向于使用CSS Sprites来合并图像并保存请求。 我从来没有尝试base64技术，但它显然不适用于IE6和IE7。 也意味着，如果任何图像的变化，那么你必须重新输送整个丢失，除非你有多个CSS文件，当然。

Answer 6

我不知道一般的最佳做法，但如果我可以帮助的话，我不会喜欢看到这样的事情。 🙂

网页浏览器和服务器有一个内置caching的东西，所以我想你最好的select就是让你的服务器告诉客户端caching图像文件。 除非你在页面上加载了非常小的图像，否则我不会想到多个请求的开销是很大的一笔交易。 浏览器通常会使用相同的连接来请求大量的文件，所以没有build立新的networking连接，所以除非通过HTTP头的stream量与图像文件的大小相比是显着的，否则我不会担心多个请求。

有什么原因，你认为现在有太多的请求去服务器？

Answer 7

我会build议它用于经常使用的小图像，例如Web应用程序的常用图标。

• 微小，因为Base64编码增加了大小
• 经常使用，因为这certificate了较长的初始加载时间

当然，旧的浏览器支持问题必须记住。 此外，使用框架的function来自动将图像内联到GWT的ClientBundle等数据URL或者至less使用CSS类，而不是直接将其添加到元素样式中可能是一个好主意。

更多信息收集在这里： http : //davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/