【发布时间】：2012-03-07 22:16:26
【问题描述】：
我在YSlow 中遇到了这条规则，用于提高性能，即不应在 HTML 中调整图像大小。他们没有提到这条规则的任何具体原因。任何想法
【问题讨论】：
标签： html performance yslow
【发布时间】：2012-03-07 22:16:26
【问题描述】：
较大的图像不好，因为除了浪费带宽外，两个同时 HTTP 连接的限制意味着在下载图像时浏览器将无法加载其他组件，因此您的 JavaScript 或其他可能需要更长的时间得到处理。
此外，客户端重新缩放该图像的处理时间将占用 CPU 周期并减慢页面渲染速度。在您可能认为的快速桌面上并没有那么糟糕，但对页面加载时间的看法甚至会受到 1/10 秒的影响（参见第 5 点 here - 100 毫秒 = 亚马逊的销售额损失 1%）。移动设备将受到更严重的影响，因为它们的处理器不是那么强大，因此必须像这样调整大小。
YSlow 的整体情况是，用户对速度的 90% 的感知是关于客户端的处理，而不是来自服务器的加载时间，这就是他们对此如此挑剔的原因。
较小的图像在调整大小时也会浪费 CPU，而且还会显得像素化，因此也很糟糕。
【讨论】：
-
根据@OZZIE 的回答，除了高 dpi 屏幕确实需要 HTML 缩放来填充额外的像素。该警告不能依赖 YSlow。
显然他们还没有听说过视网膜屏幕...如果您想要视网膜分辨率图像，它需要是像素大小的 2 倍。因此，如果您的图像以 100x100 像素显示，则需要 200x200 像素才能在视网膜屏幕上看起来清晰。但是，您不应该让它比这更大。
有许多技术可以检测用户是否有视网膜屏幕，并且仅在他/她有视网膜屏幕时才加载较大的图像。
所以对我来说，毫无例外地设置“图像不应该缩放”的一般规则也没有任何意义..
【讨论】：
更高分辨率的图像不仅在浏览器缩小时看起来很糟糕，而且还会消耗不必要的带宽。
【讨论】：
阅读标题下的说明：
不要仅仅因为您可以设置 HTML 中的宽度和高度。如果您需要
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那么你的图片（mycat.jpg）应该是 100x100px，而不是缩小的 500x500px 图片。
基本原理是，如果您要缩小图像，为什么不首先使用较小的图像？
它没有提到缩放放大，但我也不建议这样做，因为虽然你会加载较小的图像，但放大后看起来不会很好。不过，这值得一试，就好像您对质量损失感到满意一样，您可以在文件大小上实现可观的节省。
【讨论】：
主要原因是如果您以 60x40 显示图像，则不需要更重的 600x400 图像。
【讨论】：
一般：
- 如果您设置的大小小于实际下载的文件大小，则会比实际下载的文件大（因此这是不必要的网络负载）
- 如果您将尺寸设置为高于实际尺寸，则图像看起来比实际尺寸更有价值
- 浏览器 CPU 使用开销很小
确实你应该考虑它，但在某些情况下，通过浏览器调整图像大小比拥有大量图像或在服务器端准备它更好。
【讨论】：