为什么“深色模式”更节能：如何计算图像能耗

当我阅读汤姆·格林福德的优秀著作《可持续网页设计》时，有一个事实尤其让我印象深刻：

在夜间模式下运行谷歌地图，屏幕功耗降低了 63%。

这是为什么？

仔细想想，其实很简单：

黑色是OLED屏幕最节能的颜色，因为此时像素处于关闭状态；而白色是最耗能的颜色。

因此，图像使用的能量量取决于像素中光线red的green强度。blue

汤姆接着展示了他网站更新前后的两个例子：

前：

后：

后者的能耗几乎只有前者的一半！

难以置信，对吧？

于是——我坐下来，创建了一个用于计算图像能量强度的小型工具！

将图像绘制到<canvas>

`-tag`标签<canvas>有一个非常有用的方法：` { { getImageData()pixels.data.pixels ...redgreenbluealpha

const imgData = ctx.getImageData(0, 0, width, height);

利用这个数组，我们可以遍历并返回一个百分比数组：

const len = imgData.data.length / 4;

let r = 0, g = 0, b = 0, a = 0;
for (let i = 0; i < imgData.data.length; i += 4) {
  a = 255 / imgData.data[i + 3];
  r+= imgData.data[i] / 255 / a;
  g+= imgData.data[i + 1] / 255 / a;
  b+= imgData.data[i + 2] / 255 / a;
}
r = Math.floor((r/len) * 100);
g = Math.floor((g/len) * 100);
b = Math.floor((b/len) * 100);

return [r, g, b];

计算平均值：

const avg = Math.ceil((r+g+b) / 3);

该工具已在Codepen上发布——您可以尝试上传自己的图片来检查光/能量强度。

初始图像是一张纯 RGB 彩色图像，其blue值设置为 127。rgb(0, 0, 127)结果如下：

R: 0%
G: 0%
B: 49%
Average: 17% 

但是……事情并没有那么简单。

虽然这个工具可以让你大致了解图像的能耗情况，但它远比这复杂得多。

不同波长的光子能量不同，红色光子能量最低，紫色光子能量最高。

一个像素大约包含 10,000 个光子，所以我认为可以计算出特定分辨率下图像的eV成本，然后将该数字转换为瓦特，但这超出了我的能力范围！

结论

如果像Lighthouse这样的工具能够计算网站的能源效率，那就太好了——或许可以将其与常用设备在所有像素均为黑色或白色时消耗的能源量进行比较。

这样你就可以测试通过设计深色系网站可以减少多少电池消耗了！

感谢阅读！