What is Serve scaled Image issue ?
Serve Scaled Image is one of the performance measures on which a web page is measured in Google Page Speed.Serve scaled image is referred as the term Don’t scale images in HTML in Yahoo’s Yslow tool for performance measurement.
The term Serve scaled image or do not scale images in HTML means that original image dimension (height or width) is more than the dimensions of displayed image on your webpage.The original image gets resized and then displayed on webpage.
How Serve scaled image hamper website performance ?
As discussed above this issue occurs if your original image size is greater than image displayed on webpage.Now to understand the impact on website performance lets see background process.
- The browser requests your web page.All image on that web page is also requested.
- Lets 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 webpage.The total downloaded size is 200KB.
- Now if your 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 lets say)
- The extra time consumed in downloading this 20KB can be saved if original image dimensions is 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.
So by making the original image size same as that of displayed image you can save several KB of data transfer.
Find Images with Served scale image issue
You can follow below steps to determine whether Serve scaled image issue is present in your webpage.After determining problematic images you can use techniques mentioned in post to solve the issue.Follow below steps to determine images with this problem
- You can install browser extension of Page Speed and YSlow.Google is also offering online page speed service so in case you do not want to add above addons on your browser so can try that.
- Load the webpage you want to test for Served scaled image issue.
- In case of Google Page Speed the image which is resized in HTML or CSS is mentioned in the Images tab.The original dimension of image is mentioned and the final dimension of image is mentioned.
- Note the final dimensions of the image along with the image name.You need to resize your source image to this new dimension.You can leave the images which are not served from your domain as you may not have control over those images.
- Above image was generated using PageSpeed insight tool for chrome browser.You can see that original dimensions of image and displayed dimensions of image are mentioned.It also gives you idea about size in KB you can save scaling down your image.
Serve scaled image solutions
There are couple of ways to solve serve scaled images issue.I am outlining both the solutions below.One involves usage of GIMP open source image editing software and other involves usage of cPanel.cPanel is easy solution.GIMP is bit involved but is recommended as it offers many features.
- Download all the images you listed above.You can use free software like GIMP to scale your images to new dimension you noted above for each image.GIMP is open source software (free).
- For example if your original image dimension is 800*600 (width 800,height 600) and new dimension you noted is (600*450) then you need to use GIMP to scale down your image to 600*450.You can read image resize with GIMP for details of the same.
- You will have to replace original file with the new file.
The benefit of this method is that you do not need to download any additional software nor the images.This method utilizes cPanel hosting panel shipping with your hosting account.
- You can use Image manager tool of cPanel.You can read this tutorial post for details of the process using Image Manager tool provided by cPanel of your hosting account.You can read this cPanel tutorial for the process.You can also download the tutorial for free as well.
- This method will create a new file based on the dimensions and backup the original file.
After performing above steps you need to retest the webpage to check if it worked.Feel free to share your thoughts and queries.Consider sharing the post in case you found this useful.