我应该嵌入图像作为数据/ BASE64在CSS或HTML [英] Should I embed images as data/base64 in CSS or HTML

问题描述

要减少对服务器的请求数我已经嵌入了一些图像（PNG＆安培; SVG）为Base64直接进入CSS。 （它在构建过程自动化）

是这样的：

 背景：网址（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG等）;
 

这是一个好的做法呢？是否有一些理由来避免这种情况？是否有没有数据URL支持一些主要的浏览器吗？

奖金的问题：
是否有意义，为CSS和放大器做到这一点; JS也？

解决方案

  

这是一个好的做法呢？是否有一些理由来避免这种情况？

这是一个很好的做法，通常只对将要一起使用（如CSS精灵）时，IE浏览器的兼容性不要紧非常小的CSS的图像和保存的要求比高速缓存能力更重要。

它有一些显着的缺点的：

• 不在IE6和7在所有的工作。




• 在大小工程资源只能达到32K IE8 的。这是base64编码之后应用限制。换句话说，超过32768个字符。




• 它节省了请求，但涨大的HTML页面，而不是！并使得图像不可缓存。他们得到加载的每个包含页面或样式表被装载时间。




• Base64编码由33％的涨大尺寸的影像。




• 如果在gzip压缩的资源供应，数据：图像几乎肯定会是对服务器的资源可怕的旋律！图像是非常传统的CPU密集型向COM preSS，随着规模非常小的减少。

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)

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?

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

解决方案

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.

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.

这篇关于我应该嵌入图像作为数据/ BASE64在CSS或HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！