YSlow规则背后的基本原理是什么“不要在HTML中缩放图像” [英] Whats the rationale behind the YSlow rule "Don't Scale Images in HTML"

问题描述

为了提升性能，我在 YSlow 中遇到过这条规则，图像不应该在HTML中调整大小。他们没有提到这个规则的任何具体原因。任何想法

解决方案

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

另外，客户端重新调整该图像将使用CPU周期并减慢页面渲染速度。在你可能认为的快速桌面上并不是那么糟糕，但对页面加载时间的看法可能会受到十分之一秒的影响（请参阅第5点这里 - 100ms = 1％亚马逊销售额下降。移动设备将受到更严重的影响，因为他们的处理器功能不够强大，所以不得不重新调整大小。与YSlow相比，整体而言，90％的用户感知的速度是关于客户端的处理，而不是来自服务器的加载时间，这就是为什么他们会这么认真。

较小的图像也会浪费CPU当他们调整大小，并且会额外看像素化，因此也是如此糟糕。

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

解决方案

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.

这篇关于YSlow规则背后的基本原理是什么“不要在HTML中缩放图像”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！