Whats The Rationale Behind The YSlow Rule "Don't Scale Images In 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

Solution 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.

Solution 2:

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)..

Solution 3:

A higher resolution image will not only look bad when scaled down by a browser, it also consumes unnecessary bandwidth.

Solution 4:

Read the description under the title:

Don't use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.

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.

Solution 5:

The main reason is that if you display an image in 60x40, you won't need a 600x400 image which is heavier.