11. Serve Scaled Images

Serve Scaled Image is one of the performance measures on which a web page is measured. The term Serve scaled image or do not scale images in HTML means that original image size is more than the size of displayed image on your webpage. .

So by making the original image size same as that of displayed image you can save several KB of data transfer.

Guidelines & Example:

  • Let’s assume that your image dimensions are 800*600 and the size is 200KB.

  • The image is requested from the server and is downloaded by the browser to display the web page. The total downloaded size is 200KB.

  • Now if your website content area is 600px it will display the image in dimension 600*600.

  • The HTML will resize your image and display it. The resultant size of the image displayed on web page will be several bytes lower than original size downloaded from server (in this example it can be 20KB let’s say)

  • The extra time consumed in downloading this 20KB can be saved if original image dimensions are equal to dimensions of image displayed on webpage. In your image the original image dimensions should be 600*600 instead of 800*600 for better performance.