为每页提供多个图像的好技术答案

【问题标题】：Good techniques for serving several images per page为每页提供多个图像的好技术
【发布时间】：2013-02-01 14:12:35
【问题描述】：

我有一个 Web 应用程序，它需要为每页提供大量小图像（最多 100 个）。我可以使用缓存来减少对数据库/后端的调用，但是必须对图像本身发出如此多的单独请求会产生明显的影响，因为图像需要一些时间来请求和渲染，尤其是在较慢的连接上。

在一个页面上提供多张图片有哪些好的做法？我知道使用 CDN（例如 S3 + Cloudfront）来减少 http 请求的瓶颈并从更近的地理位置提供内容，以及仅当它们在浏览器中进入用户视图时才可能通过 Ajax 加载图像/内容.是否有其他技术可以为图像密集的页面提供显着的性能提升？它们是否与硬件、前端或其他东西相关并不重要。

谢谢。

【问题讨论】：

图片是什么？他们有关系吗？也就是说，当你展示一个时，你总是展示同一组其他人吗？
@Oded：图片各不相同，一般都是10-20kb左右的小jpeg。
问题更多的是它们是否经常一起使用。
@Oded - 不幸的是他们不是。我一次缓存 10 分钟，这说明了它们变化的速度。
图片可以用其他方式表示吗，比如通过 SVG？

标签： image performance cdn download-speed

【解决方案1】：

在一个页面请求中加载 100 张图片会增加页面加载时间，因为每张图片都需要时间在浏览器中加载。

简单的方法是只加载一张默认图片，意味着每100张图片的来源应该是普通的默认图片，只有一张图片不会花费太多时间。

当页面加载其所有内容时，然后尝试在 jQuery 的帮助下加载每个图像。

使用lazyload jQuery插件在页面加载后加载所有图片。

喜欢这个

<img class="lazy" src="default.jpg" data-original="img1.jpg" >
<img class="lazy" src="default.jpg" data-original="img2.jpg" >
<img class="lazy" src="default.jpg" data-original="img3.jpg" >
.......
<img class="lazy" src="default.jpg" data-original="img100.jpg">

并在脚本中使用以下代码

$(document).ready(function(){
  $("img.lazy").lazyload();
});

您可以为每个图像添加过期标头，以允许浏览器缓存它们而不是在下一次请求时请求它们。

希望对你有所帮助。

【讨论】：

【解决方案2】：

您可以为图像使用不同的域 - 这些将在与当前域不同的线程上调用。

您还可以将图像托管在经过优化以提供静态内容的网络服务器上 - 这将比动态服务器更快。

以上可以扩展到几个这样的域 - 如果浏览器设置为每个域有 4 个线程，则您添加的每个域将并行化为额外的 4 个（这也是使用 CDN 的好处之一）。

可能应用的另一个常见技术是使用CSS sprites - 如果您有一堆常用的图像，您可以将它们全部放在一个单个 em> 图像并使用 CSS 仅在需要的地方显示需要的位。

【讨论】：

【解决方案3】：

您始终可以将图像组合成单个图像，并使用 CSS 一次只显示其中的一部分（通常称为 CSS 精灵）

Google 也有一篇关于他们如何实施“即时预览”的相当深入的文章，其中涵盖了一些优化：

http://googlecode.blogspot.com/2010/11/instant-previews-under-hood.html?m=1

【讨论】：

谢谢，但在这种情况下，图像是通过数据库请求的，并且通常在应用程序中是“动态的”。雪碧不是一种选择。
@Oded - 当然。然而，在这种情况下，图像本身链接到更多内容，用户可以编辑它们，并且用户可以操纵它们的服务顺序。如果我走这条路，我想我会比我一开始试图解决的问题更头痛。