什么是YSlow规则“不要在HTML中缩放图像”背后的基本原理

Question

我在YSlow中遇到了这条规则，用于提高性能，即不应在HTML中调整图片大小。他们没有提到这条规则的任何具体原因。任何想法

Answer 1

较大的图像是坏的，因为除了浪费带宽，两个同时HTTP连接的限制意味着浏览器将无法在下载图像时加载其他组件，因此您的JavaScript或其他任何内容可能需要更长时间得到处理。

此外，客户端上重新缩放该图像的处理时间将使用CPU周期并减慢页面呈现速度。在您可能想到的快速桌面上并没有那么糟糕，但是对页面加载时间的感知甚至会受到1/10秒的影响（参见第5点here - 100毫秒= 1％的亚马逊销售损失）。由于他们的处理器功能不那么强大，因此不得不像这样重新调整移动设备。

YSlow的全部内容是，90％的用户对速度的感知是关于客户端的处理，而不是来自服务器的加载时间，这就是为什么他们对此如此苛刻。

较小的图像在调整大小时也会浪费CPU，并且还会看起来像素化，因此也是如此糟糕。

Answer 2

显然他们没有听说过视网膜屏幕......如果你想要一个视网膜分辨率图像，它需要是像素大小的2倍。因此，如果您的图像以100x100px显示，则需要200x200px才能在视网膜屏幕上显得清晰。但是你不应该比这更大。

有许多技术可以检测用户是否有视网膜屏幕，只有当他/她有这个时才加载更大的图像。

所以对我来说，设置“图片不应缩放”的一般规则也毫无意义..

Answer 3

更高分辨率的图像不仅在浏览器按比例缩小时看起来很糟糕，而且还会消耗不必要的带宽。

Answer 4

阅读标题下的说明：

  

请勿使用比您需要的更大的图像，因为您可以设置   HTML中的宽度和高度。如果你需要   <img width="100" height="100" src="mycat.jpg" alt="My Cat" />
  然后你的形象（mycat.jpg）应该是   100x100px而不是缩小的500x500px图像。

理由是，如果您要缩小 down 图像，为什么不首先使用较小的图像？

它没有提到缩放 up ，但我不建议这样做，因为虽然你要加载的图像较小，但一旦放大就不会看起来很好。值得尝试的是，好像你对质量的损失感到满意，你可以节省大量文件。

Answer 5

主要原因是如果以60x40显示图像，则不需要600x400的图像，这样会更重。

Answer 6

一般来说：

1. 如果你设置的尺寸小于实际尺寸，那么实际下载的文件会比实际尺寸大（所以不必要的网络负载）
2. 如果您将尺寸设置为高于实际尺寸，那么图像看起来会比它看起来更有价值
3. 浏览器CPU使用量的开销很小

你真的应该考虑它，但在某些情况下，最好通过浏览器调整图像大小，而不是使用大量图像或在服务器端进行准备。