什么是服务小型静态图像的最佳方式？

Question

什么是服务小型静态图像的最佳方式？

javajavascriptpythonimage

3

目前我正在将它们进行Base64编码并使用数据URI。这个想法是这样做可以降低浏览器需要发出的请求数量。这种方法可行吗？

一般来说，什么是提供图像的最佳方式？是从数据库、文件系统还是S3中获取？

我最感兴趣的是基于Python和Java的答案，但所有答案都受欢迎！

- NorthIsUp

4个回答

3

Nicholas C. Zakas编写了一个工具, 使在css中使用data URI更加容易，同时还包含了一个IE6/7兼容修复：

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

- Gabe Moothart

2

现在我正在对它们进行Base64编码并使用数据URI。这样做的想法是可以降低浏览器需要发出的请求数量。这个想法可行吗？

这绝对是一个坏主意：它在IE＜8中不起作用；它增加了33％的数据传输量，并使图像完全无法缓存。

我建议您将图像作为适当的图像资源提供，无论是作为单独的文件还是像@Nick所建议的那样作为CSS精灵，这取决于它们的数量和大小。

- Pekka

@Gabe，我的理解是他在HTML文件中显示base64数据，而不是在样式表中？ - Pekka

1

虽然我在技术上同意你的观点，但有时减少服务器请求次数比节省缓存或容量更为可取。我承认，特别是与浏览器要求配对时，这种情况会很少，但仍然存在。 - McKay

是的，我同意CSS Sprites是一个好主意。实际上是一个很棒的主意。但是Data URL并非普遍都是不好的主意。另外，Data URL（用于图像）在IE8中得到支持，但在之前的浏览器中不受支持。而能够负担得起不支持它的人？这可能包括非常技术的用户群体、由公司控制浏览器选择的内部应用程序、Mac网站等。 - McKay

@McKay 你是正确的，我当然是指IE7。是的，所有的观点都是正确的。 - Pekka

IE7及以下版本中的URI http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ - N30

显示剩余2条评论

1

数据 URL 肯定会减少对服务器的请求次数，因为浏览器不必在单独的请求中请求像素。但是并非所有浏览器都支持它们。您必须做出权衡。

- Ned Batchelder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

我肯定会看一下CSS图像精灵，这里有些不错的介绍：这里和这里.

概念非常简单，将您的图像合并到一个文件中，仅作为CSS背景显示所需部分。这样可以将许多图像的HTTP请求数量降低到一个或多个（将小图像根据适当的规则分组到精灵地图中），并减少需要维护的图像数量，CSS 中只有一些背景坐标。

此外，与任何静态资源一样，确保设置正确的缓存头信息，以使客户端不必要地获取它。