How to remove Serve Scaled Images issue from website?

What is Serve Scaled Images issue?

Serve Scaled Images is a performance measure for images. Google Pagespeed uses the terms Serve Scaled Images. On the other hand YSlow uses the terms Don’t scale images in HTML. Both of them report same issue.

Lets understand the problem with an example. You have taken cool photograph of a tourist spot. Most cameras and mobile phones now take images well beyond 3000 px. So your original image size more than 3,000 px.

The image width and size depends on Mega Pixel (MP) of camera or mobile phone camera. The more the mega pixel is the more wider image will be. 8 mega pixel camera takes image of approx 3K width . But truth is we are using camera of much higher mega pixel nowadays.

Now you put the original image on your site. Visitors will see the image from their desktop browsers or mobile browsers. The screen width of desktop browsers are less than 2000 px. On an average the average desktop screen width is approx 1,500 px.

Mobile have the width of 480 px at max. The original image size is more than 3K px. But the browser width is less than 1,500 px. So original image gets resized by the browser. This resized image is then displayed to the visitor.

Note above we have considered screen width of desktop and mobile. But most of the time content width area of our web page is around 1,200 at max. So we are scaling down the original image from more than 3K px to around 1,200 px. This is the best case.

This case of resizing original image by web browsers to display it is known as Serve Scaled Image.Now lets see how it impacts your website performance.

How Serve Scaled Images impacts website performance?

Serve Scaled Images are worst enemy of performance on image heavy web page or website. It can significantly delay page load time. Lets understand performance impact with example we discussed above.

The original image you took has dimensions more than 3K. Lets assume the size of image as 3MB (mega bytes). To get displayed on desktop it was resized by more than 50%. Note we are assuming best case scenario in our example.

Lets assume size of image to be directly proportional to dimensions of it. So the image finally displayed on web page is of 1.2 MB.

Below is brief description of process that takes place behind the screen web page is viewed by browser. This little technical stuff wil help us understand impact Serve Scaled Image has on performance of a website.

  1. The browser requests your web page.All image on that web page is also requested.
  2. We assume that there is only one image. Our original example image only.
  3. The original image is requested from the server and is downloaded by the browser.
  4. Now your website or web page content area is 1200 px.
  5. The HTML will resize your image and display it.

So the browser is downloading 3MB of original image. The displayed image size on browser is only 1.2MB. So we can easily save (3 – 1.2) = 1.8 MB. To save this 1.8MB we have to send original image of size 1,200 px.

Things become worse if you have more than one image on the web page or for mobile visitors. You can score big on page load time by optimizing serve scaled images issue.

How to find images with Serve Scaled Images issue?

The first step to solve serve scaled images issue is to identify images having this problem. Note every image with size greater than your content width will have this problem. Ideally you should serve images which do not require resize in HTML.

There are two ways to identify images with Serve Scaled Images issue. All you have to do is scan your web page using Google Page Speed or Yahoo YSlow. In case you are not familiar with these tools then you can read my step by step guides on them ( Google Page Speed guide link / Yahoo YSlow guide link )

These two guides you provide in depth coverage of both the tools. Once you have scanned your website then you are aware of images causing the issue and savings you can make.

It will be tough to scan all the pages. So below is the trick I use on this very site. You can also follow the same on yours

  1. All Images which are greater than 2K pixels are candidate for Serve Scaled Images issue.
  2. So identify all images with above width on your site.
  3. In first step consider optimizing these images.

Note images with width less than 2K pixel are also prone to Serve Scaled Images issue. But the impact of them on performance will be less compared to images above 2K in width. Once you have taken care of heavier images you can proceed with lighter ones.

Removing Serve Scaled Images issue

In this section we will see few ways to optimize size of your images. I have tried to come up with wide range of solutions. You can use any one of them. The solutions re not mentioned in performance order. I have ordered them in my preference. I use the first method on this very site.

Note all the method mentioned below use the same principle. They decrease dimension of your images. At the same time the size of your images also gets decreased. The first method is most powerful as it generates quality images with lesser size.

Note first method is easy as well compared to other methods. But if you speak of performance then second method is best. It is difficult and involves code changes.It involves more manual work then first or third method.

Note all the method mentioned in this article are applicable for all websites. You can use them if your website is powered by WordPress or Joomla or any other technology. It does not make a difference.

Method 1

In first method we will use Open Source Image manipulation Software called GIMP. It is very powerful software. I personally recommend this one for all Image related manipulation. Below is brief details of the steps involved to scale down your image and decrease it’s size.

Step 1

You can download and install GIMP as per your operating system from this link. It supports Windows , Mac OS and Linux operating system and is totally free of cost. After installing the software open it.

Step 2

Now open the image you want to optimize in GIMP.Then Click on the option Scale Image under the Images menu as shown in below image.

gimp-image-scale-image-menu

Step 3

After you click on Scale Image option a window will pop up as shown in the image. You can change width and height of the image on this window. If you change height then width will get auto calculated keeping the aspect ratio in tact.

gimp-scale-image-option

So you can either change height or your image or width of your image. I would recommend using 1024 px ass width of image. You can also use the content width of your web page on desktop as image width. This will ensure optimized images for desktop visitor.

On this website I mostly use image width as 600px. This ensures optimal image for desktop visitors and not too heavy images for mobile visitors. You can set dimension of your images accordingly.

Step 4

You can leave other settings as shown in the image. You just have to change width or height or both. After making changes click on Scale button.It will scale down the image. Note the full size image will not be displayed by GIMP.

So it is better to export the size and then see if it servers your purpose. Else you can use View Zoom option of GIMP to see full size image.

Once you are satisfied with the image size you can then click on File Export As option. This will present you with File Save dialog. You can save the image in wide range of file formats. You can name your image name and file format here.

Note I will discuss JPG and PNG image formats here. Since these two are most important image file formats.

Step 5 (for JPG)

Once you click on the Export option of above window it will display a new pop up. The pop up depends on type of image you are exporting to. For example below image is displayed for JPG.

gimp-export-image-quality

On this window you need to change only the Quality option. Rest of the options can remain as they are. The Quality option determines the size of image and quality of image. I prefer 70 as quality. It gives very small file size and good quality image.

You can experiment with quality to see image size and quality you want. Note GIMP by default creates progressive JPG images. Progressive JPG images are themselves very good for performance.

Step 5 (for PNG)

If you give your exported image file name as PNG then it will display pop up window as shown in below image. You can select the options as shown in the image. Once changes are made you can click Export. This will create PNG file for your original image.

gimp-scale-image-png

Method 2

This method is for developers. So if you are comfortable making code changes then you can use it. It is more time consuming then the first method. But it makes sure you eliminate Serve Scaled Images issue for all your web pages.

In this method we will use HTML5 picture tag. Note this is newly introduced tag in HTML5. It is not supported by older browsers though. So you will have savings only on newer browsers. This is not major limitation though. With time more browsers are getting compatible with HTML5 features.

Understanding HTML5 Picture tag

Lets understand Picture tag first. Picture tag allows you to mention more than one image. You can mention different images for different screen width. Note I am using screen width for area avaiable to display the image.

So if you have image inside any content div then you should consider content div as screen width.

In below code small_image.jpg is loaded for screen width less than 480 px. So on mobile devices your small_image.jpg will be loaded in browser. For greater screen width original_image.jpg will get displayed.

Browsers who do not support picture clause yet will download the original_image mentioned in img tag.

<picture>
  <source media="(min-width: 481px)" srcset="original_image.jpg">
  <source media="(max-width: 480px)" srcset="small_image.jpg">
  <img src="original_image.jpg">
</picture>

How HTML5 picture tag helps?

Above you might have noticed that we are sending two different version of same file. The small_image.jpg is small image with dimensions 480px at max. So mobile browsers will not have to download heavy original image.

This helps you solve Serve Scaled Image issue and increase your website performance on small devices. All you have to do is create scaled down version of your images. Then include those images in Picture tag of HTML5.

I recommend using above code. It helps you save big on mobile devices. Also you do not have to create too many versions of same image. Note you can use the code as it is to add your images. The code will work fine irrespective of technology you are using to create website.

Method 3

This method is only for user having cPanel. It is provided as last option. If you can not use first two options then you should try this one. I used this method long back and currently I am not using it.Instead of covering other Image manipulation software I preferred including cPanel here.

The reason is cPanel is available in almost all shared hosting account. So you do not have to pay anything extra. You are already having it. So better to use existing tool you have instead of buying and trying new tool.

cPanel comes with Image Manager tool. The tool creates new image as per the dimensions given by you. It also backs up you original image. You can process as many images you want quickly using this option. I have covered Image Manager in my cPanel tutorial for beginners.So I am not reproducing the steps here.

Conclusion

Personally I use the first method. It does not help me eliminate the serve scaled images issue. But it hels me save big on bytes wasted. Instead of transferring heavy image I am transferring medium size image. There is wastage of bytes but it is less.

For example 3K dimension image with 3MB size is scaled to 1024K dimension with .5MB size or less. So I am already cutting down on size. Moreover GIMP creates progressive JPG images. These images helps in optimizing page load times.

The first method is fast also. All images of this post were created using GIMP. It takes less than 1 minute to scale down a image and upload it to WordPress.

The second method is best but is time consuming. I would love to use second method but on image heavy pages. Since this one is not a photography or similar type of site with huge image sizes second method is not required.

But if you too many images and images are very important (travel sites, arts sites etc) then I recommend using second method. You can create different version of your images and display it to your users. So users using all devices will get optimal results.

The third method is for quick results people. You can easily decrease size of your image and get going. It will not remove Serve Scaled Images warning form your pages but will help on performance side.You can select the option which meets your requirement.

Leave a Reply

Your email address will not be published. Required fields are marked *