1

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

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

4

2 回答 2

2

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

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

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

于 2013-10-19T14:05:30.883 回答
0

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

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

于 2013-10-19T12:59:48.550 回答