2010-10-28 64 views
3

现在我是基地64编码他们和使用数据uris。这个想法是,这会以某种方式降低浏览器需要的请求数量。这个水桶拿着水吗?服务小静态图像的最佳方式是什么?

服务图像的最佳方式是什么? DB,来自FS,S3?

我最感兴趣的是基于python和java的答案,但都欢迎!

回答

13

我一定会看看CSS Image Sprites,体面的写作herehere

这个概念非常简单,将您的图片合并为一个,只显示您需要的切片作为CSS背景。这样可以将来自多个图像的HTTP请求数量降低为一个或多个(在适当的情况下将精灵图中的小图像组合在一起),并且维护的图像更少,CSS中只有一些背景坐标。

此外,与任何静态资源make sure your cache headers are set correctly一样,所以客户端不会不必要地读取它。

+0

+1我会这么做......虽然精灵是很难维护,它可能是最好的解决方案 – pleasedontbelong 2010-10-28 18:59:21

+0

@pleasedontbelong - 这取决于你的图像编辑器我想,我个人使用Fireworks,并发现它们很容易维护,我只是出口一个扁平化的PNG的最终精灵......一切都可编辑在原始/源文件中。 – 2010-10-28 19:01:10

+0

从我对另一个CSS sprite问题的回答中得到更多的信息:“Base64编码的数据比原始字节大1/3,所以在下载所有图像数据所花费的时间比提出请求长三倍以上的页面上,CSS sprites从性能的角度来看,它是优越的。“ http://stackoverflow.com/questions/3525663/css-sprites-vs-data-uris/3525961#3525961 – Chuck 2010-10-28 19:18:01

2

现在我是64位编码他们和使用数据uris。这个想法是,这会以某种方式降低浏览器需要的请求数量。这个水桶拿着水吗?

这绝对是一个坏主意:它won't work in IE < 8;它增加了33%的服务数据量;它使图像完全不可缓存。

我想说你应该把图片作为适当的图片资源 - 无论是作为单独的文件,还是像@Nick所说的CSS精灵,将取决于它们的数量和大小。

+0

数据URI被缓存为css文件的一部分。我假设你的意思是每当css改变时你都必须重新下载所有的图像。此外,Base64压缩得很好,所以我怀疑额外的数据量是那么大。 – 2010-10-28 19:10:30

+0

@Gabe我理解它的方式,他在HTML文件中显示base64数据,而不是在样式表中显示? – 2010-10-28 19:17:04

+1

尽管我在技术上同意你的观点,但有时候减少服务器命中数比在缓存或卷上节省一点点更为可取。我承认,特别是在配合浏览器要求的情况下,这些案例将会很少,但仍然存在。 – McKay 2010-10-28 19:18:37

1

数据URL肯定会减少对服务器的请求数量,因为浏览器不需要请求单独的请求中的像素。但是它们在所有浏览器中都不受支持。你必须做出权衡。

3

Nicholas C. Zakas写了tool,使得它更容易在CSS中使用数据URI,并且还包含一个IE6/7兼容FIX:

CSSEmbed还支持MHTML模式 使IE6和IE7兼容 使用类似于数据URI的内部图像 的样式表。

相关问题