同一页面上的缩略图和原始图像

Question

在我的网站上，我有一个特色图像/内容滑块，它显示了一组较大的图像（~100kb），下面有缩略图（每个~10kb）。问题很简单——我应该使用浏览器端调整较大图像的大小还是下载缩略图？每个似乎都有缺点。处理器对浏览器的影响（在移动设备上尤其重要）或下载缩略图导致的额外下载。

那么，常见的建议是什么？

Answer 1

我会即时使用服务器端为缩略图调整大小的图像并缓存它们，这样我就不必再次调整它们的大小。以下是我会这样做的几个原因：

1. 服务器端图像不会向您的页面添加额外的 javascript，这反过来会增加额外的加载时间。
2. 可以使用正确的标题轻松缓存服务器端图像。在某些浏览器中缓存客户端调整大小的图像可能会成为问题，并且可能会导致每次加载页面时重新调整大小的浪费。
3. 客户端图像调整速度将受浏览器和计算机/设备速度以及当前工作负载的影响。
4. 在客户端解决方案中，用户必须先下载高分辨率图像才能调整大小。通过图像准备服务器端，您可以利用大多数现代浏览器的并行下载能力，因为它们允许发生 X 数量的并发连接。您可以在browserscope 上查看每个浏览器允许的每个主机名的连接列表。
5. 某些浏览器不支持您使用的调整大小方法，您可能需要寻找解决方法或 polyfill 来支持某些浏览器。例如走 Canvas 路线。
6. 如果您的内容滑块增长到总共 16 个图像，您可能需要加入一些幻灯片分页。如果没有正确完成，您将迫使客户生成他们可能甚至不想看到的图像。这会使User's perception 表明您的页面没有完成加载并且感觉很慢。在这种情况下，我什至不想加载隐藏或屏幕外的图像和缩略图，直到用户单击分页滑块中的下一页。在技​​术上与 lazy loading plugin 所做的类似。
7. 可以从CDN 加载服务器端图像。客户端图像不能。

附：有大量的服务器端图像大小调整解决方案非常快。 Jpegtran 只是一个非常好的一个简单的命令行工具，你会发现它已经在大多数 linux 发行版上可用。如果您正在寻找更强大的东西，我也会推荐graphicsmagick，它有很多端口可以支持各种语言，例如PHP

Answer 2

这取决于。 单个用户应该体验多少次调整大小？如果数量相当小，我会考虑在客户端这样做以分配工作量。

如果这个数字非常高，我宁愿在服务器端这样做。 这种方法要求您的服务器能够提供所需的性能。