Whats the rationale behind the YSlow rule "Don't Scale Images in HTML"

Question

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

Answer 1

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.