1

简而言之：
是否有任何研究/数据/分析证明 html 中的图像缩小会极大地消耗移动设备的电池电量？因此严格禁止图像缩小？

全文：
作为一名设计师，我正在寻找一种简单的方法来使图像看起来很漂亮，并且适用于包括 Retina 在内的所有类型的屏幕。
作为一名开发人员，我正在寻找最佳、优化和高效的代码服务方式。

好吧，作为一名设计师，我发现制作视网膜就绪图像的简单方法是使用双倍大小的图像，并在 html 中缩小它们但是在你跳到我说这是不好的做法之前，听听这个。
双倍大小的图像可以降低高达 60% 的质量，而不会影响质量。完全没有人工制品。最终尺寸甚至可以小于 80% 质量的标准图像。只要源的大小大于所需的图像，它就可以工作。我希望这对你有意义。
这是一个例子： 

   <!-- Standard Image Container. size 500x497, @80 quality and 77KB size -->
   <div>
       <img src="https://dl.dropboxusercontent.com/u/15137556/500x497%4080.jpg" width="500" height="497" alt="Standard Image. Original size 500, @30 quality and 77KB size">  
   </div>

   <!-- Retina Hi-Res Image Container. size 1000x994, @45 quality and 74KB size -->
   <div>
       <img src="https://dl.dropboxusercontent.com/u/15137556/1000x994%4045.jpg" width="500" height="497" alt="Hi-Res Image. Original size 1000, @30 quality and 47KB size">
   </div>

http://jsfiddle.net/UXjny/

我的问题是：
1. 执行此类缩放是否需要任何繁重的 CPU/GPU 进程？
2. 它们对移动设备的电池有显着影响吗？
3. 我在哪里可以阅读它，或者我如何测试它？

我发现的只是维基百科的一些注释：

缩放是一个重要的过程，需要在效率、平滑度和锐度之间进行权衡。
对于位图图形，随着图像尺寸的缩小或放大，构成图像的像素变得越来越明显，如果像素被平均，则图像看起来“柔和”，否则会出现锯齿状。
对于矢量图形， 权衡可能在于重新渲染图像的处理能力，这可能会因静态图形的重新渲染速度较慢，或者计算机动画中的帧速率和跳帧速度较慢而引起注意。

所以我假设只有像 SVG 这样的矢量图形可能会对 CPU 和 GPU 产生开销。位图似乎还不错。

4

1 回答 1

1

这里会有点倒退，我的真实答案在底部。第一部分是个人建议。

对于最终控制，canvas如果您使用 jQuery 事件之类的东西，resize那么您可以制作一个响应式画布，该画布将根据您自己的选择加载/适应环境，通常 CPU 在这条路线上总是会更高一些，并且相当多的时间来设置它。

这还可以让您根据屏幕宽度加载不同版本的图像，让您轻松访问视网膜和更适合移动设备的图像。通常，只要将图像处理本身保持在最低限度并且移动设备/浏览器可以使用该canvas元素，那么您应该不会在任何受支持的设备上遇到太多问题。

典型的img标签是自动的，这意味着除了一些样式控件之外，您实际上无法对其进行任何操作，因此从开发人员的角度来看，带有img标签的控件要少得多，canvas标签可能更难使用，但可以做所有事情你的要求。

我的答案

在客户端缩小规模，同时进行相当优化仍然需要一些资源。但是我不认为它会比任何其他应用程序更影响您的电池，它还很大程度上取决于您使用的浏览器应用程序、手机的 CPU 以及手机使用的电池类型。

这是我发现的一篇文章，其中包含一些很好的信息和一些参考链接。

网页如何延长（或耗尽）移动设备的电池寿命

它解释说智能手机越来越好，但电池并没有得到同样的待遇，因为我们得到了更好的智能手机，我们并没有真正得到更好的电池。因此，如果用户没电了，无法快速浏览网页，那么开发人员也无能为力。优化网站只能到此为止，而遵循响应式设计仍然存在大量资源浪费。

响应式网页设计：它是什么以及如何使用它

回顾一下

  1. 执行此类缩放是否需要任何繁重的 CPU/GPU 进程？

    大多数现代手机的 CPU/GPU 可以毫不费力地处理它。

  2. 它们对移动设备的电池有显着影响吗？

    一切都会影响手机的电池寿命，即使你认为你拥有它，那么你没有看到的东西可能会耗尽它。

  3. 我在哪里可以阅读它，或者我如何测试它？

    请参阅我添加的链接以获得一些合理的阅读，第一个链接显示手机的数量可能很快就会超过地球的人口。有了这么多设备，您如何测试手机/电池的每一种变化？没有办法测试这一切。

于 2013-08-13T17:01:41.910 回答