Question

简而言之：
是否有任何研究/数据/分析证明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进程定标？
它们是否会极大地影响移动电池设备？
3.我在哪里可以阅读它，或者我该如何测试它？

我发现的所有内容都来自维基百科：

缩放是一个非常重要的过程，涉及之间的权衡效率，平滑度和清晰度 使用位图图形，作为图像的大小减小或放大，构成的像素图像变得越来越明显，如果图像显得“柔和” 像素是平均的，或者如果没有则是锯齿状的使用矢量图形 权衡可能是处理能力以重新渲染图像，这是可能会因为静止图形的慢速重新渲染而变得明显，或者更慢计算机动画中的帧速率和帧跳过。

所以我假设只有像SVG这样的矢量图形可能会在CPU和GPU上产生开销。位图似乎并不那么糟糕。

Answer 1

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

对于最终控制，如果您使用类似jQuery canvas事件的话，我会使用resize，然后您可以制作一个响应式画布，根据您自己的选择加载/适应环境，CPU总的来说，这条路线总是要高一点，而且需要花费相当多的时间来设置它。

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

典型的img标签是自动的，这意味着除了一些样式控件之外你没有别的东西可以做到，所以从开发人员的角度来看，使用img标签的控制要少得多，canvas标签可能更难使用，但可以满足您的所有要求。

我的回答

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

这篇文章我发现它有一些很好的信息和一些参考链接。

How Web Pages Can Extend (or Drain) Mobile Device Battery Life

它解释说智能手机越来越好，但是电池没有得到同样的待遇，因为我们获得了更好的智能手机，我们并没有真正获得更好的电池。因此，如果用户用完电池来快速浏览网页，那么开发人员就无法做很多事情。优化网站只会到目前为止，并且响应式设计仍然会浪费大量资源。

Responsive Web Design: What It Is and How To Use It

回顾

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

大多数现代手机的CPU / GPU可以在不破坏的情况下处理它汗。
它们对移动设备的电池有显着影响吗？

一切都会影响手机的电池寿命，即使您认为有那么你没看到的东西可能会耗尽它。
我在哪里可以阅读它，或者我该如何测试它？

请参阅我添加的链接以获得一些合理的阅读，第一个链接显示手机的数量可能超过地球的人口不久。有了这么多设备，你怎么能测试每一个变体手机/电池？没有办法测试这一切。

html的位图图像缩小是否会影响移动电池的使用寿命？

1 个答案: