程序员经常把一张大图缩的很小后使用。鸽说的缩小不是压缩，而是真的缩小。我见过有人使用超过10M的巨大LOGO图片。但在网页上也只有100x50大。这一点像用高射炮打蚊子，或杀鸡用牛刀。图像看起来很好很清晰，但是它浪费了用户的数据并损害了页面性能。作为帅气的程序猿，自然不能允许这种事情发生。我们接下来讲讲如何搞定这个事情。
找到大小不正确的图像＃
使用了LightHouse的36测可以很容易地识别大小不正确的图像。在测试结果中，列出了所有需要调整大小的任何图像。如果你想跑个高分，也就意味着不能有太多的大小不正确的图片
确定正确的图像大小＃
图像的大小可能会很复杂。出于这个原因，我们提供了两种方法:“好的”和“非常好的”。两者都将提高性能，但“非常好”的方法可能需要更长的时间来理解和实现。然而，它也会带来更大的性能改进。鸽推荐你都看看，然后量力而行。
一个关于CSS单位的快速说明＃
有两种类型的CSS单元用于指定HTML元素的大小，包括图像:
- 绝对单位:使用绝对单位样式的元素将始终以相同的大小显示，无论设备如何。有效的，绝对的CSS单位的例子:像素，厘米，毫米，英寸。
- 相对单位:根据指定的相对长度，使用相对单位样式的元素将以不同的大小显示。有效的，相对CSS单位的例子:%，vw (1vw = 1%的视口宽度)，em (1.5 em = 1.5倍的字体大小)。
“好”的方法＃
对于图像大小基于…
- 相对单位:调整图像的大小，使其能够在所有设备上工作。
你可能会发现检查你的分析数据(如谷歌analytics)能够帮助你了解用户最常用的显示尺寸。另外,screensiz.es提供关于许多常见设备显示的信息。
- 绝对单位:调整图像大小以匹配其显示的大小。
DevTools Elements面板可以用来确定图像显示的大小。
“更好”的方法＃
对于图像大小使用绝对的单位:使用srcset和大小属性为不同的图像提供不同的显示密度。“显示密度”是指不同的显示器具有不同的像素密度。在其他条件相同的情况下，高像素密度的显示器看起来会比低像素密度的显示器更清晰。因此，如果您想让用户体验到尽可能清晰的图像，就需要多个图像版本，而不管他们的设备的像素密度如何。响应式图像技术允许您列出多个图像版本，并让设备选择最适合它的图像，从而实现这一点。这样的话，在低分辨率设备上，会节约很多不必要的图片大小。
调整图像
无论选择哪种方法，都可以使用ImageMagick来调整图像的大小。ImageMagick是用于创建和编辑图像的最流行的命令行工具。大多数人使用CLI调整图像大小的速度要比使用基于gui的图像编辑器快得多。但如果你需要调整很多图像的话，最好和你的程序员聊聊，也许他们有更好的主意。