通过html缩小位图图像尺寸真的会影响手机电池寿命吗？

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

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

作为一名设计师，我发现制作视网膜就绪图像的简单方法是使用两倍大小的图像，然后用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>

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

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

缩放是一个非常重要的过程，涉及到之间的权衡 效率、平滑度和清晰度
使用位图图形，作为 图像的大小被缩小或放大，构成图像的像素 图像变得越来越明显，如果 像素为平均值，否则为锯齿状。
使用矢量图形 重新渲染图像的处理能力可能是一个折衷办法，这 当使用静止图形重新渲染时可能会很慢，或者速度较慢 计算机动画中的帧速率和跳帧

---

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

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

对于最终控制，我将使用

canvas

如果您使用jQuery

resize

事件之类的东西，那么您可以根据自己的选择制作一个响应性的canvas来加载/适应环境，在这条路线上，CPU通常会稍微高一点，设置它需要相当长的时间

这还可以让你根据屏幕宽度加载不同版本的图像，让你轻松访问视网膜和更便于移动的图像。一般来说，只要图像操作本身保持在最低限度，并且移动设备/浏览器可以使用

canvas

元素，那么在任何受支持的设备上都不会遇到太多问题

典型的

img

标记是自动的，这意味着除了一些样式控件之外，您没有其他真正可以做的事情，因此从开发人员的角度来看，使用

img

标记的控件要少得多，其中

canvas

标记可能更难使用，但可以满足您的所有要求

我的答案

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

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

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

重述

是否需要任何繁重的CPU/GPU进程来执行这种扩展

大多数现代手机的CPU/GPU都可以在不破坏网络的情况下处理它 汗水

它们对移动设备的电池有显著影响吗

任何事情都会影响手机的电池寿命，即使你认为你有 然后你没看到的东西可能会把它吸干

我可以在哪里读到它，或者如何测试它

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

---

我想说的倒一点，我的真实答案在下面。第一部分是个人建议

对于最终控制，我将使用

canvas

如果您使用jQuery

resize

事件之类的东西，那么您可以根据自己的选择制作一个响应性的canvas来加载/适应环境，在这条路线上，CPU通常会稍微高一点，设置它需要相当长的时间

这还可以让你根据屏幕宽度加载不同版本的图像，让你轻松访问视网膜和更便于移动的图像。一般来说，只要图像操作本身保持在最低限度，并且移动设备/浏览器可以使用

canvas

元素，那么在任何受支持的设备上都不会遇到太多问题

典型的

img

标记是自动的，这意味着除了一些样式化控件之外，您没有其他真正可以做的事情，因此从开发人员的角度来看，使用

img

标记的控件要少得多，其中