我应该将图像作为 data/base64 嵌入 CSS 还是 HTML

Should I embed images as data/base64 in CSS or HTML

提问by meo

To reduce the number requests on the server I have embedded some images (PNG & SVG) as BASE64 directly into the css. (Its automated in the build process)

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

like this:

像这样：

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

Is this a good practice? Are there some reasons to avoid this? Are there some major browser that don't have data url support?

这是一个好习惯吗？有什么理由可以避免这种情况吗？是否有一些主流浏览器不支持数据 url？

Bonus question: Does it make sense to do this for the CSS & JS also?

额外的问题：对 CSS 和 JS 也这样做有意义吗？

回答by Pekka

Is this a good practice? Are there some reasons to avoid this?

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

It's a good practice usually only for very small CSS images that are going to be used together (like CSS sprites) when IE compatibility doesn't matter, and saving the request is more important than cacheability.

当 IE 兼容性不重要并且保存请求比可缓存性更重要时，通常仅适用于将一起使用的非常小的 CSS 图像（如 CSS 精灵）是一个很好的做法。

It has a number of notable downsides:

它有许多显着的缺点：

• Doesn't work at all in IE6 and 7.

• Works for resources only up to 32k in size in IE8. This is the limit that applies after base64 encoding. In other words, no longer than 32768 characters.

• It saves a request, but bloats the HTML page instead! And makes images uncacheable. They get loaded every time the containing page or style sheet get loaded.

• Base64 encoding bloats image sizes by 33%.

• If served in a gzipped resource, data:images are almost certainly going to be a terrible strain on the server's resources! Images are traditionally very CPU intensive to compress, with very little reduction in size.

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

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

• 它保存了一个请求，但反而使 HTML 页面膨胀！并使图像不可缓存。每次加载包含页面或样式表时，它们都会加载。

• Base64 编码使图像大小膨胀 33%。

• 如果在 gzip 压缩的资源中提供，data:图像几乎肯定会对服务器资源造成可怕的压力！图像在传统上是非常占用 CPU 的压缩，尺寸几乎没有减少。

回答by JAR.JAR.beans

Common answers here seems to suggest this is not needed, for a set of legit reasons. However, all of these seems to neglect modern apps behavior and build process.

出于一系列合法的原因，这里的常见答案似乎表明不需要这样做。然而，所有这些似乎都忽视了现代应用程序的行为和构建过程。

It's not impossible (and actually quite easy) to design a simple process that will walk through a folder images and will generate a single CSS with all the images of this folder.

设计一个简单的过程来遍历文件夹图像并生成包含该文件夹中所有图像的单个 CSS 并非不可能（实际上也很容易）。

This css will be fully cached and will dramatically reduce round trips to the server, which is as correctly suggest by @MemeDeveloper one of the biggest performance hits.

这个 css 将被完全缓存，并将大大减少到服务器的往返次数，正如@MemeDeveloper 正确建议的那样，这是最大的性能影响之一。

Sure, It's hack. no doubt. same as sprites are a hack. In perfect world this will not be needed, until then, it's a possible practice if what you need to fix is:

当然，这是黑客。毫无疑问。与精灵一样是黑客。在完美的世界中，这将是不需要的，在此之前，如果您需要修复的是：

1. Page with multiple images that are not easily "spritable".
2. Round trip to servers are an actual bottleneck (think mobile).
3. speed (to the milliseconds level) is really that important for your use case.
4. You don't care (as you should, if you want the web to go forward) about IE5 and IE6.

1. 带有多个不容易“可喷绘”的图像的页面。
2. 往返服务器是一个实际的瓶颈（想想移动）。
3. 速度（到毫秒级别）对于您的用例来说真的很重要。
4. 您不在乎（如果您希望网络向前发展，您应该这样做）关于 IE5 和 IE6。

my view.

我的看法。

回答by Martin Buberl

It's not a good practice. Some browsers are not supporting data URIs (e.g. IE 6 and 7) or support is limited (e.g. 32KB for IE8).

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

See also this Wikipedia article for complete details on the Data URI disadvantages:

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

• Data URI scheme

• 数据URI方案

Disadvantages

• Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files) so data is downloaded every time the containing documents are redownloaded.
• Content must be re-encoded and re-embedded every time a change is made.
• Internet Explorer through version 7 (approximately 15% of the market as of January 2011), lacks support.
• Internet Explorer 8 limits data URIs to a maximum length of 32 KB.
• Data is included as a simple stream, and many processing environments (such as web browsers) may not support using containers (such as multipart/alternativeor message/rfc822) to provide greater complexity such as metadata, data compression, or content negotiation.
• Base64-encoded data URIs are 1/3 larger in size than their binary equivalent. (However, this overhead is reduced to 2-3% if the HTTP server compresses the response using gzip)
• Data URIs make it more difficult for security software to filter content.

缺点

• 数据 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 使安全软件更难以过滤内容。

回答by stephenmurdoch

I was using data-uri's for about a month, and Ive just stopped using them because they made my stylesheets absolutely enormous.

我使用 data-uri 大约一个月了，我刚刚停止使用它们，因为它们使我的样式表变得非常庞大。

Data-uri's do work in IE6/7 (you just need to serve an mhtmlfile to those browsers).

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

The one benefit I got from using data-uri's was that my background images rendered as soon as the stylesheet was downloaded, as opposed to the gradual loading we see otherwise

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

It's nice that we have this technique available, but I won't be using it too much in the future. I do recommend trying it out though, just so you know for yourself

很高兴我们可以使用这种技术，但我将来不会过多地使用它。我确实建议您尝试一下，这样您就可以自己了解了

回答by Steve Claridge

I'd more inclined to use CSS Sprites to combine the images and save on requests. I've never tried the base64 technique but it apparently doesn't work in IE6 and IE7. Also means that if any images changes then you have to redeliver the whole lost, unless you have multiple CSS files, of course.

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

回答by Chris

I have no idea about general best practices but I for one would not like to see that kind of thing if I could help it. :)

我不知道一般的最佳实践，但如果我能帮忙的话，我不希望看到这种事情。:)

Web browsers and servers have a whole load of caching stuff built in so I would have thought your best bet was to just get your server to tell the client to cache image files. Unless you are having loads of really small images on a page then I wouldn't have thought the overhead of multiple requests was that big a deal. Browsers generally will use the same connection to request lots of files so there are no new network connections being established so unless the volume of traffic through HTTP headers is significant compared to the size of the image files I wouldn't worry about multiple requests too much.

Web 浏览器和服务器内置了大量缓存内容，因此我认为您最好的选择是让您的服务器告诉客户端缓存图像文件。除非页面上有大量非常小的图像，否则我不会认为多个请求的开销有那么大。浏览器通常会使用相同的连接来请求大量文件，因此不会建立新的网络连接，因此除非通过 HTTP 标头的流量与图像文件的大小相比很大，否则我不会过多担心多个请求.

Are there reasons why you think there are too many requests going to the server at the moment?

您是否认为目前有太多请求发送到服务器？

回答by Sebastian

I would suggest it for tiny images that are used very often, for example common icons of a web application.

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

• Tiny, because the Base64 encoding increases the size
• Often used, because this justifies the longer initial load time

• Tiny，因为Base64编码增加了尺寸
• 经常使用，因为这证明了较长的初始加载时间

Of course support problems with older browsers have to be kept in mind. Also it might be a good idea to use the capability of a framework to automatically inline the images a data urls such as GWT's ClientBundle or at least use CSS classes instead of adding it to the element's style directly.

当然，必须牢记旧浏览器的支持问题。此外，使用框架的功能自动将图像内联到数据 url 中（例如 GWT 的 ClientBundle）或至少使用 CSS 类，而不是直接将其添加到元素的样式中，这可能也是一个好主意。

More information are gathered here: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/

此处收集了更多信息：http: //davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/