YSlow 规则“不要在 HTML 中缩放图像”背后的基本原理是什么？
我在 YSlow 中遇到了这条用于提高性能的规则，该规则表示图像不应该在 HTML 中调整大小。他们没有提到这条规则的任何具体原因。任何想法
I have come across this rule in YSlow for performance improvement that says that images should not be resized in HTML. They haven't mentioned any specific reason for this rule. Any ideas
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
较大的图像不好，因为除了浪费带宽之外，两个同时 HTTP 连接的限制意味着浏览器在下载图像时将无法加载其他组件，因此您的 JavaScript 或其他内容可能需要更长的时间来处理。
此外，客户端重新缩放图像的处理时间将使用 CPU 周期并减慢页面渲染速度。在您可能认为的快速桌面上还不错，但对页面加载时间的感知甚至可能受到 1/10 秒的影响（请参阅第 5 点 此处 - 100 毫秒 = 亚马逊销售额损失 1%）。移动设备将因必须调整大小而受到更严重的影响，因为它们的处理器不那么强大。
YSlow 的全部问题是，用户对速度的感知 90% 与客户端的处理有关，而不是来自服务器的加载时间，这就是为什么他们对此如此挑剔。
较小的图像在调整大小时也会浪费 CPU，而且还会看起来像素化，因此也很糟糕。
Bigger images are bad because as well as wasting bandwidth, the limit of two simultaneous HTTP connections means that a browser will not be able to load other components whilst the image is being downloaded, so your JavaScript or whatever may take a lot longer to get processed.
Additionally, the processing time on the client end to rescale that image will use CPU cycles and slow down page rendering. Not so bad on a fast desktop you might think, but perceptions of page loading time can be influenced by even 1/10th of a second (see point 5 here - 100ms = 1% lost sales for Amazon). Mobile devices will be even more seriously impacted by having to resize like this as their processors are not so powerful.
The whole thing with YSlow is that 90% of the user's perception of speed is about the processing on the client end, not the load time from the server, which is why they get so persnickety about this.
Smaller images will also waste CPU when they are resized, and will additionally look pixellated, so bad for that reason too.
显然他们还没有听说过视网膜屏幕……如果你想要视网膜分辨率的图像，它需要是像素大小的 2 倍。因此，如果您有一个以 100x100 像素显示的图像，则它需要为 200x200 像素才能在视网膜屏幕上看起来清晰。但是，您不应该将其设置得比这个更大。
有多种技术可以检测用户是否有视网膜屏幕，并且仅在用户有视网膜屏幕时加载较大的图像。
所以对我来说，设置“图像不应该缩放”的一般规则毫无意义也是没有意义的。
Apparently they haven't heard of retina screens... if you want a retina resolution image it needs to be 2x the size in pixels. So if you have an image that is displayed in 100x100px it needs to be 200x200px to look sharp on a retina screen. You should however not make it any bigger than this.
There are a number of techniques to detect if the user has a retina screen and only load the larger image when he/she has that.
So for me it also doesn't make sense to set a general rule that "Images shouldn't be scaled" without exception(s)..
更高分辨率的图像在被浏览器缩小时不仅看起来很糟糕，而且还会消耗不必要的带宽。
A higher resolution image will not only look bad when scaled down by a browser, it also consumes unnecessary bandwidth.
阅读标题下的描述：
基本原理是，如果您要缩小图像，为什么不首先使用较小的图像呢？
它没有提到放大放大，但我也不建议这样做，因为尽管您需要加载较小的图像，但放大后看起来不会很好。不过，这可能值得尝试，就好像您对质量的损失感到满意一样，您可以在文件大小上实现相当大的节省。
Read the description under the title:
The rationale is that if you are going to scale down an image, why not just use a smaller image in the first place?
It doesn't mention scaling up, but I wouldn't recommend that either because although you would have a smaller image to load, it would not look very good once scaled up. It can be worth experimenting though, as if you're happy with the loss of quality you can achieve decent savings on the file size.
主要原因是，如果您显示 60x40 的图像，则不需要更重的 600x400 图像。
The main reason is that if you display an image in 60x40, you won't need a 600x400 image which is heavier.
一般来说：
确实你应该考虑它，但在某些情况下，通过浏览器调整图像大小比拥有大量图像或在服务器端准备图像更好。
In general:
Really you should consider it but in some cases it's better to resize image by browser than have a lot of images or prepare it on the server side.