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
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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.