SiteGround is one of the recommended hosting companies by official WordPress.org. In recent years, SiteGround hosting has grown into different level. They have replaced the traditional cPanel setup and migrated all existing accounts to their custom Site Tools setup. With this you can serve WebP images instead of PNG or JPEG to boost the speed of your website loading. In this article, we will explain how to serve WebP images in SiteGround and check in the browser.
Why WebP Images?
Whenever you check the page speed score in Google PageSpeed Insights tool, it will show you many opportunities that can improve the site speed. One of the important suggestion that you can’t resolve easily is “Serve images in next-gen formats”. The next-gen formats include WebP, JPEG 2000 or JPEG XR to replace the traditional image formats of PNG and JPEG.
Therefore, serving WebP image will help you to solve the Google PageSpeed Insights problem. Moreover, it reduces the image size to more than 75% less with the same quality thus improving the page loading speed.
How it Works with SiteGround?
SiteGround offers SG Optimizer plugin that allows you to enable converting all your images to WebP format. The good part is that you do not need any other setup.
- All WebP images are stored in server side and you can’t view them in your Media Library. It is possible view them in your media uploads folder using FTP from File Manager app.
- You can check whether WebP images are loading when viewing the site in browser.
- You have to activate WebP for individual site basis on your hosting account.
How to Serve WebP Images in SiteGround?
If you are not using SG Optimizer, you have to first install the plugin.
- Login to your WordPress site and go to “Plugins > Add New” section.
- Search for “SG Optimizer” to find the plugin.
- Install and activate the plugin on your site.
After installing SG Optimizer, go to “SG Optimizer” menu and then to “Media Optimization” section. Here, you have the options for enabling WebP images on your site.
Remember, if you are already using any caching plugins then you should not enable other options in SG Optimizer plugin. Make sure not to enable the same options in two plugins and breaking the site.
Enable WebP for New Images
First enable “Generate WebP Copies of New Images” option. Choose the optimization type to choose the quality of your WebP images. The lossless option helps you to retain the quality and lossy option reduce the size to much lower by reducing the image quality.
We recommend you to select lossless to retain the quality with nominal reduction in size. However, if you have larger images on your site and quality reduction is acceptable for you then choose lossy option. For lossy option, you can select the percentage of quality by dragging the slider.
Upload a new image and check the quality of few images on the browser (see the below section for this) before you bulk process all existing images.
Bulk Generate WebP Files
Once you decided and setup the quality, click on the “Bulk Generate WebP Files” button. This will regenerate WebP version for all your existing images. Unlike normal image optimization option, creating WebP images will only take less time depending upon the number of images on your site. In our case, we have 14K images that took hardly less than a minute.
Changing the Quality
At any point of time you can decide to change the quality from lossless to lossy or vice versa. You can also change the quality of the lossy WebP images any point later. Whenever you change the quality, click on the “re-generate” link to regenerate images with new quality. Alternatively, click on the “Delete All WebP Files” button and then click on “Bulk Generate WebP Files” to regenerate images with new quality.
Testing WebP Images in Browser
Open your site in Google Chrome and check the source code from Developer Console. You will still see PNG or JPEG images are loading instead of WebP images. However, this is not the correct way to check.
Since you can’t see WebP images in hosting server or from Media Library, you may get confused whether it works on your site or not. Follow the below instructions, in order to confirm you site works with WebP images.
- Open Google Chrome and open Chrome Developer Tools section. You can access developer tools by pressing F12 in Windows and going to “Option + Command + I” in Mac.
- Click “Network” tab and open the webpage in address bar. If you have already opened the page, click in the refresh button to reload the page.
- Now, you can see the network activities are getting recorded and click on “Img” tab.
- Here, you can see the type of the resource loaded from your site.
- You can sort the “Name” or “Type” column to check the image type. It should show as “WebP”.
- This is the way to confirm WebP images are served from your website.
Alternate Way of Testing
The other way of testing is simple.
- Open you webpage on Chrome and right click on any of the images.
- Select “Save Image As…” option.
- You should see the image format as “Google WebP”.
Though the original image is PNG (or JPEG), you should see the format as “Google WebP” as this is the image format available on your site.
Cached WebP Images
Some caching plugins like WP Rocket allows you to cache WebP images. If you cache WebP images then you can find the .png.webp or .jpg.webp versions in your hosting server under uploads directory. This is not the default behavior of SiteGround WebP service and when you disable the caching plugin, the cache generation will stop and you should use one of the above methods to verify.
How Much Size I Can Save?
This really depends on the quality you choose for your WebP images. In our case, we choose lossless option and have the saving of more than 77% for single image.
- Original PNG image size – 139KB
- WebP image size – 31KB
Testing Back with Google PageSpeed Insights
Now, go back to Google PageSpeed Insights tool and test one of your webpage. The suggestion for serving images in next gen format should disappear now.
Points to Take Care
Make sure to take care of the following points when using WebP on your site:
- Not all browsers support WebP, make sure to check your site on Google Chrome or any supported browser.
- Caching plugins like WP Rocket offers to cache WebP images to boost the page loading speed. However, these caching plugins will not detect WebP images in SiteGround server. You can confirm with the plugin developer before enabling caching of WebP images.
- CDN services like Cloudflare will seamlessly work with SiteGround. However, if you have a separate CNAME setup to serve media files through CDN, confirm with your CDN provider whether they can serve WebP images. Also, do not enable WebP in Cloudflare if you are using premium plans.
- WebP option is not available for the sites still using cPanel setup. You have wait for SiteGround to migrate your account to Site Tools (this should have been by this time for all users).
- You have to use SG Optimizer plugin to enable WebP, without the plugin there is no way you can enable from your hosting account.
- Make sure to regenerate the images whenever you change the quality of the WebP images.
Site speed is becoming important factor with Google announced Core Web Vitals that will influence the ranking in future. SiteGround websites are already on Google Cloud platform and with WebP you will be much ahead of your competition hosted on other companies.