如何处理网页中的大量图像？答案

【问题标题】：How to handle A LOT of images in a webpage?如何处理网页中的大量图像？
【发布时间】：2016-04-11 21:23:41
【问题描述】：

所以我制作了一个网站，然后我把它展示给了一位网络开发人员。我想让我的网站成为一种“视觉体验”，每个页面至少有 30 个 50x 50 的缩略图、120 x 100 的图像和更多的缩略图。它将是一个仅限会员的页面，因此您可以使用图像，注册用户越多，我们将拥有更多图像。事实上，每个成员都可以拥有自己的相册，这将是另一组图像。

所以他真的很担心我的网站不会得到优化，并说除非我投资购买一台非常昂贵的服务器，否则图像无法立即加载。用户将不得不等待几秒钟才能加载图像。

所以我想知道有什么技术可以解决这个问题吗？当我查看像 facebook.com 这样的网站图像的 src 属性时，它会转到像 http://profile.ak.fbcdn.net/hprofile-ak-snc4/27537_45309870078_2551_s.jpg 这样的地方。这是将所有图像存储在不同服务器/网站上的某种技术吗？

所以基本上，我将拥有一个图像密集型网站，我想知道什么是确保用户体验尽可能流畅并且不让用户等待单个图像加载的最佳方法。谢谢。

【问题讨论】：

您需要研究架构并了解它们是如何工作的，有什么区别等等。facebook 不会将所有内容都托管在单个服务器上，它只是无法工作。如果您真的希望拥有所有这些图像，并且数量会根据用户进行扩展，那么您需要研究内容服务器和缓存技术。这不是“什么是快速修复”类型的问题。思想需要进入架构，否则根本无法扩展。
看看别人是怎么做的，例如imgur.com 在他们的博客中发布了一些见解。如果我没记错的话，Github 也发布了一些东西。

标签： optimization image-processing

【解决方案1】：

有一些服务，称为 CDN，content delivery networks。一些大网站有自己的网站。

【讨论】：

【解决方案2】：

为您的图像使用多个域，因为浏览器对每个域的传出连接都有限制（IE：2）。
使用过期标头以避免多次下载同一个图像。
在服务器上生成缩略图（不要在浏览器中调整图像大小）以最小化所需的带宽。
投资 Akamai。

【讨论】：

【解决方案3】：

基本上，该问题的解决方案是使用 Content Delivery Network，例如 Akamai。本质上，您只是在不用于处理请求的服务器上缓存图像以便更快地访问。

【讨论】：

【解决方案4】：

除了使用 CDN，正如其他答案所建议的那样，还要尽量避免或延迟加载您不需要加载的图像（还）。示例：执行随机 Google 图片搜索并滚动浏览结果。查看仅在向下滚动时如何加载图像？ YUI 2 似乎是个不错的选择。

【讨论】：

【解决方案5】：

你也可以在 Apache 服务器前面使用 nginx 作为代理服务器。

【讨论】：