What is the rationale for the YSlow "Do not scale images in HTML" rule

Question

I found this rule in YSlow to improve performance, which states that images should not be modified in HTML. They did not mention any specific reason for this rule. Any ideas

Answer 1

Large images are bad because, like bandwidth traffic, limiting two simultaneous HTTP connections means the browser will not be able to load other components while the image is loading, so your JavaScript or something else may take a lot of time to process.

In addition, client-side processing time to re-scale this image will use processor cycles and slow down page rendering. It's not so bad on a fast desktop that you might think about, but even 1/10 of a second can affect the perception of page loading time (see point 5 here - 100 ms = 1% lost sales for Amazon). Mobile devices will be even more seriously affected by the need for resizing, as their processors are not so strong.

All that is associated with YSlow is that 90% of users' perceptions of speed are related to client-side processing, and not the download time from the server, which is why they are so uneasy about this.

Smaller images will also discard the processor when they change, and they will also look pixelated, so bad for this reason.

Answer 2

Apparently, they have not heard of mesh screens ... if you want a retina resolution image, then it should be twice the size in pixels. Therefore, if you have an image that is displayed in 100x100px format, it must be 200x200 pixels in order to look sharp on the retina screen. However, you should not do this more than that.

There are several methods for determining if a user has a retina screen and uploads a larger image when he / she has it.

So it also makes no sense for me to establish a general rule that "images should not be scaled" without exceptions (I) ..

Answer 3

An image with a higher resolution will not only look bad when reduced by the browser, but also consumes unnecessary bandwidth.

Answer 4

Read the description under the heading:

Do not use a larger image than necessary, because you can set the width and height in the HTML. If you need <img width="100" height="100" src="mycat.jpg" alt="My Cat" />
then your image (mycat.jpg) should be 100x100px, not a thumbnail of 500x500 pixels.

The rationale is that if you are going to scale the image, why not just use the smaller image in the first place?

Scaling is not mentioned, but I would not recommend it either because, although you would have a smaller image to upload, it would not look very good after the extension. It might be worth experimenting, because if you are happy with the loss of quality, you can achieve decent savings on file size.

Answer 5

The main reason is that if you display an image at 60x40, you will not need an image that is 600x400, which is heavier.

Answer 6

Generally:

• If you specify a size smaller than the actual size, than the actual downloaded file will be larger than it can be (so this is an unnecessary network load).
• If you set a size higher than the actual size, than the image will look decent, than it can be
• This is a small overhead for use by the browser processor.

Indeed, you should consider this, but in some cases it is better to resize the image by the browser than to have many images or prepare it on the server side.