我应该为移动网站调整图像大小吗答案

【问题标题】：Should I resize images for a mobile site我应该为移动网站调整图像大小吗
【发布时间】：2014-04-19 11:32:11
【问题描述】：

我有一个非常简单的问题想问那些比我知识渊博的人。

问题的基础是。在开发移动网站时。我是否应该动态调整从外部来源获得的图像的大小以使其更小。还是应该将它们保留为大图像并使用 css 处理？

我正在构建的移动网站从 web 服务中提取大量图像作为 base 64。现在我的思路是这样的。我想让我的网站尽可能小，因此将图像大小调整为更小似乎是个好主意。

另一方面。使用 javascript 调整图像大小（主要开发人员希望一切都只在客户端完成......），可能会导致用户移动设备的开销。

您对此事有何看法。我应该调整图像大小吗？

提前感谢您的回答。

【问题讨论】：

“我正在构建的移动网站从 web 服务中提取大量图片作为 base 64” – outch。 Base64 意味着对“真实”二进制数据的大量开销。（所以至少使用 GZIP 来尽可能减少负面因素。）
不幸的是后端不是我的工作。另一个可能也可行的想法是从网站中提取一个 url，而不是 base 64。你在那里添加了很好的一点！
“使用 javascript 调整图像大小” - 不知道你的意思；通常你会通过为图像设置 dimensions（通过 HTML 属性或 CSS）来调整图像客户端的大小，而不是在 JS 中实现实际的图像大小调整算法。无论如何，调整大小也会消耗计算能力，这在非顶级移动设备上可能是相当稀缺的资源，并且无论如何反映在电池功耗上。
该网站也将允许上传图片。使用 javascript 调整它们的大小是最小化上传大小的一种方法。但是对于下载的图像，调整它们的大小是不必要的，因为正确设置您的 html 元素将解决您调整大小的问题。
需要考虑的另一点：许多移动连接提供商通过他们自己的服务器代理请求并在那里应用额外的图像压缩，或者用户可能会使用外部服务（如新的 Opera Max）来节省流量/bandwidth - 我不确定它们如何处理真正的大图像。对这些图像进行严格压缩，再加上在客户端上将尺寸调整为更小的尺寸，最终可能会导致图像质量更差，而不是一开始就提供适当尺寸的图像。

标签： javascript html

【解决方案1】：

始终注意移动用户的连接。移动连接上的延迟通常要高得多（因此请尽量限制请求的总数，无论大小如何），传输速度较慢，而且超额费用往往很昂贵。

在大多数情况下，最好的解决方案是提供与浏览器所需大小大致相同的图像。浏览器中的大小“调整”很好。提供更大的图像将允许更高质量的缩放，但您应该明智地使用它（图像是否真的需要在缩放时显示更多细节？）

还要注意每次请求图像时调整图像大小的服务器端费用。最好设置一次大小，然后将结果保存到缓存或数据库中。

Facebook takes this approach。截至 2009 年，他们正在生成和存储每个图像的四个不同版本。

如果您必须在移动浏览器中使用全尺寸图像，至少尝试延迟加载它们，以便仅在需要时下载它们（例如，当它们第一次滚动到视图中时）。

【讨论】：

这是真的！！我们位于南非，移动设备的数据速率在这里非常昂贵。我喜欢你引用的文章。很少有地方需要大图像。如果可能，网络服务应该返回较小的图像。我非常喜欢你的回答。你扩大了很多讨论范围，增加了很多我没有想到的内容。延迟加载是一个好主意，特别是因为该网站将有一个照片库部分。感谢您的精彩回答。

【解决方案2】：

我所知道的最佳方法 - 使用现有的响应式图像解决方案。

即：

对于后端 - http://adaptive-images.com/
前端 - https://github.com/scottjehl/picturefill

您可以选择更适合您的那个。这取决于项目。

如果您只有移动网站 - 为其提供较小的图片并为您的用户节省时间和流量。如果你不能 - 只需通过 css 缩放它。

【讨论】：