缩略图和原始图像在同一页

Question

在我的网站上，我有一个精选的图像/内容滑块，显示一组较大的图像（〜100kb），下面有缩略图（每个约10kb）。问题很简单 - 我应该使用浏览器调整大图像的大小还是下载缩略图？每个似乎都有缺点;处理器会影响浏览器（在移动设备上尤其重要），或者下载缩略图会造成额外下载。

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

Answer 1

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

如果数量比显然高，我宁愿在服务器端做到这一点。 这种方法要求您的服务器能够提供所需的性能。

Answer 2

我会在飞行中使用服务器端为缩略图调整大小的图像并缓存它们，所以我不必再次调整它们的大小。这里有几个原因，我会这样做：

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

P.s.有很多服务器端图像调整大小的解决方案，非常快。 只是一个很不错的命令行工具，你会发现它已经在大多数Linux发行版上可用。如果你正在寻找一些更强健的我还建议graphicsmagick和它的许多端口，如PHP