How To Compress Images to Improve Google Pagespeed Optimization Score

This guide details the steps for compressing JPEG and PNG images for the purpose of improving the Google Pagespeed Optimization Score of the pages that the images are served on.

Google provides a tool that can be used to gain insights about the performance of a page. It is claimed by some that the score of a page, as indicated by this tool, influences the ranking of the page on Google’s organic search results. I cannot confirm if this is true but it seems plausible enough. As such, it may be worthwhile to try and improve this score as much as possible as part of your search engine optimization strategy.

After having worked a bit with the tool, I have observed that compressing images and scripts has yielded the single biggest improvement of the score. Therefore, in order to equip you with the means to satiate the beast, I will be outlining the steps to compressing images in this post; and the steps to compressing scripts in a later post.

What You’ll Need

The application that you’ll be using is GIMP. It is a free image manipulation tool that possesses all of the functions that will be needed to complete the task at hand. Download and install the application then continue with the guide.

Compressing JPEGs

To begin, you’ll need to start up GIMP and get any JPEG image. Pixabay is a really great place to do this.

Step 1: Open your image in GIMP by going to FileOpen in the menu or dragging and dropping the image into the application.

Step 2: Go to FileExport As and enter a name for the new, compressed copy of the image that you will be creating. Make sure not to change the file extension. Click Export in the bottom right of the dialog. That should reveal the following dialog:

Step 3: Expand the Advanced Options section by clicking on the plus sign or the text itself. The dialog should now look like this:

To modify the size of the image, you will be changing the Quality and the Subsampling settings.

Step 4: Change Subsampling to the last option in the drop-down list “4:2:0 (chroma quartered)”. This is the bare minimum that it takes to satisfy the optimization tool (as of the writing of this post). If desired, the size of the image can be decreased further by decreasing the Quality. Set it to 60. The dialog should now look like this:

Step 5: Click Export in the bottom right. The new, compressed file should now exist. Compare the file sizes of the images to confirm the difference in size. The quality of the images should now also be different, although it may not be perceptible if the starting quality of the image was already very high. You should play around with the quality setting in order to better appreciate how the size and quality of the image changes for different configurations.

The old image can now be replaced with the newer, smaller image and this should please the Pagespeed tool. This process should be repeated for each image on the web page whose score is being improved and there will likely only be a change in the score after every image is processed.

Compressing PNGs

The process is much like the previous. Make sure you have GIMP open and that your PNG image is ready.

Step 1: Open the image in GIMP by going to FileOpen in the menu or dragging and dropping the image into the application.

Step 2: Go to FileExport As and enter a name for the new, compressed copy of the image that you will be creating. Make sure not to change the file extension. Click Export in the bottom right of the dialog. That should reveal the following dialog:

To modify the size of the image, the Compression level must be modified.

Step 3: Unlike with JPEGs, compressing PNGs does not alter the quality of the image. As such, it is best to set the compression level as high as possible (level 9) which is normally where it will be set when the dialog appears. If this is not the case, manually move the slider to the right to set the highest compression level.

Step 4: Click Export in the bottom center. The new, compressed file should now exist. Compare the file sizes of the images to confirm the difference in size. If the initial image was already compressed, it is possible that there will be no change in file size.

The old image can now be replaced with the newer, smaller image and this should please the Pagespeed tool. This process should be repeated for each image on the web page whose score is being improved and there will likely only be a change in the score after every image is processed.

Conclusion

When every image on the page is processed the optimization score of the page should improve significantly. Furthermore, if the prophecies are true, this should also improve the organic search ranking of the page.


Whenever I’m needed, I can be summoned by closing your eyes and making a wish to the heavens and I will appear… but only if I already happen to be walking into the room that you’re standing in. The rest of the time, I can be reached on twitter.

Peace.

Leave a Reply

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