提供小型静态图像的最佳方法是什么？

Question

现在我把它们用 base 64 编码，然后使用数据 URI。我的想法是这样可以减少浏览器需要发出的请求数量。这种做法靠谱吗？

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

我最感兴趣的是关于 Python 和 Java 的答案，但其他的也欢迎！

Answer 1

现在我把它们用 base 64 编码，然后用数据 URI。我的想法是这样可以减少浏览器需要发出的请求数量。这种做法靠谱吗？

这绝对是个坏主意：它在 IE 8 之前的版本上是无法使用的；而且会让传输的数据量增加 33%；最重要的是，这样做会让图片完全无法被缓存。

我建议你还是把图片作为正常的资源来提供——是单独的文件，还是像 @Nick 提议的那样使用 CSS 精灵，这要看你图片的数量和大小来决定。

Answer 2

Nicholas C. Zakas 写了一个 工具，这个工具可以让你在 CSS 中更方便地使用数据 URI，同时还提供了一个可以让 IE6 和 IE7 兼容的修复方案：

CSSEmbed 还支持一种 MHTML 模式，这样就能让使用内部图片的样式表在 IE6 和 IE7 中也能正常工作，类似于数据 URI 的效果。

Answer 3

我建议你看看CSS图片精灵，这里有一些不错的介绍 在这里 和 在这里。

这个概念其实很简单，就是把你的多张图片合成一张，然后只显示你需要的那一部分作为CSS的背景。这样做可以减少浏览器向服务器发送的请求次数，把很多图片请求合成一个或几个请求（你可以把小图片按需放在精灵图里），同时也能减少需要维护的图片数量，CSS里只需要写一些背景坐标就可以了。

另外，和任何静态资源一样，确保你的缓存头设置正确，这样客户端就不会不必要地去重新获取这些资源。