SiteGround is one of the hosting companies officially recommended by WordPress.org.
Over the past few years, SiteGround hosting has grown to a higher level. They have replaced the traditional cPanel configuration and migrated all existing accounts to their custom Site Tools configuration.
With this they can serve WebP images instead of PNG or JPEG and convert your current images to this format to increase the loading speed of your website . In this article, I will explain how to serve WebP images in SiteGround and check them in the browser.
Why should I use WebP images?
Every time you check the speed result of a page in the optimization measurement tools such as Google PageSpeed Insights or GTMetrix, they will show you recommendations to improve the speed of the site.
One of the important suggestions that you can’t easily solve is “Serve images in next-generation formats“.
The next generation formats are WebP, JPEG 2000 or JPEG XR, to replace the traditional PNG and JPEG image formats.
Therefore, serving WebP images will help you solve the problem of web speed measurement service.
In addition, using WebP format images reduces image size by more than 75% less with the same quality, thus improving page loading speed.
How do I do it on SiteGround?
SiteGround offers the SG Optimizer plugin, which among other things allows you to activate the free conversion of all your images to the WebP format. Best of all, you don’t need to configure anything.
Just a few details:
- All WebP images are stored on the server, and you cannot view them in the image library, although you can view them using the file browser or via FTP.
- You can check if WebP images are loading by viewing your site from any browser that supports this format (most current ones, except Safari).
- You have to enable WebP conversion on each site, it is not a general hosting account setting.
If you are not yet using the SG Optimizer plugin you are missing out on most of the optimization and security improvements of SiteGround, not just the conversion to WebP, so the first thing is to install the plugin if you haven’t already done so:
- Login to your WordPress site administration and go to Plugins -> Add New.
- Search for “SG Optimizer” to find it.
- Install and activate the plugin.
When you have installed the plugin go to the plugin settings section in “SG Optimizer -> Media Optimization“. There you will find the available options to activate WebP images on your site.
Once there, let’s get down to business, because it’s a matter of a couple of clicks.
Create WebP copies of new images
The first thing is to enable WebP copies to be automatically created for each image you upload.
Just activate the selector and choose what type of conversion you want:
- Lossless (no quality loss)
- Lossy (with loss of quality)
I recommend that you select the lossless option so that you can maintain the image quality while reducing the size of the images.
However, if you upload very large images and can afford some quality reduction, you can choose the lossless option.
If you do, you can change the percentage of quality by dragging the slider.
Once you put it to your liking the test is very simple, just upload a new image and check the quality in the browser (I tell you how to do it below) before doing the bulk generation of all existing images.
But do the test, especially to determine the final quality of the images, and the size of the files.
Bulk generate WebP files
Once you have decided on the quality settings, you can click on the “Bulk Generate WebP Files” button.
This will generate WebP versions of all the images you already have in your media library.
Unlike the normal image optimization option, creating WebP images takes considerably less time to generate, but as always it will depend on the amount of images you have.
In my case it always takes quite a lot of time in these things (hours) but there are more than 14 thousand images in the blog’s media library.
Can the quality be changed at any other time?
Yes, at any time you can decide to change the quality type from lossy to lossless or vice versa.
You can also change the lossy quality of WebP images at any time.
Just click on the link for “re-generation” and they will be created in the new quality.
If you prefer, you can always click the “Delete all WebP files” button, and then click the “Bulk Generate WebP Files” button again to recreate the WebP images in the new quality you have chosen.
How to view and check if WebP images have been created
The first thing anyone would do would be to open the site with Google Chrome and test the source code in the developer console.
And that’s a mistake, because you’ll still see images loaded in PNG or JPEG instead of WebP format.
So what’s wrong? Doesn’t it work?
Not at all, it’s just not the right way to check.
But there they are, you just have to know how to see if they’re working or not. And to do that, you should follow the instructions below, so you can check if your site is serving images in WebP format:
- Open Google Chrome and then (right click) the developer tools(Inspect).
- Now click on the “Network” tab and open the website (if you haven’t already done so) in the address bar, and if you were already on it, reload the page.
- Now you can see the network activity and click on the “Img” tab in this section.
- There you’ll see the types of resources on your site.
- If you look at the “Name” or “Type” columns, you will see the type of image. And you should see the “WebP”.
This is the right way to check if your website is serving images on WebP.
Is there no other “human” way to check?
Well, there is. If you prefer, you don’t have to use the browser’s developer console.
The other way to check is simpler:
- Open the web page in Chrome and right click on any image that should be WebP.
- Select the “Save image as…” option.
- When you save it you should see that the format is WebP “
name of file.webp“.
Even if the original format is PNG or JPEG you should see that the download format is “Google WebP”, since that is the image format available on your site.
Of course, you can check that they physically exist on your server, from the SiteGround Site Tools file manager or by FTP. They will be saved in the format name-image-original.jpg.webp.
How much can I save by converting to WebP?
It really depends on the quality you choose for your WebP images. But I’m telling you, the savings are brutal.
Right here in the blog I have configured the quality without loss, and the difference is abysmal, more than 90% file size savings.
Imagine what this means for the loading speed of your pages.
Details to keep in mind
To finish, let’s see some details that you should consider before launching to convert your images to WebP, despite its obvious advantages…
- Not all browsers support the WebP format, so be sure to test your images in Google Chrome as well as in the other browsers your visitors use. You can check this information in analytical tools such as Google Analytics or the same statistics of your server in SiteGround.
- In the browsers that do not support WebP, the original images (PNG or JPG) will be automatically served so that there are no problems viewing your images in these browsers.
- CDN services like Cloudflare work perfectly with sites hosted on SiteGround. However, if you have configured any CNAME to serve images from CDN then check to see if you can serve WebP images. In addition, these CDN services in their paid versions also offer WebP generation.
- The ability to convert to WebP is not available on sites that are still in cPanel, which have not been migrated to Site Tools in SiteGround. If this is your case, you will have to wait a little bit until they migrate your account to Site Tools.
- I remind you that you have to use the SG Optimizer plugin to convert to WebP, you cannot activate it on your hosting account.
- Make sure you re-generate the images when you change the quality of the WebP images.
- Be careful with the disk space and number of inodes, because WebP images are stored in your upload folder and, although they weigh less than other formats, they occupy disk capacity.
Final note
The speed of the websites is becoming an important factor in the Core Web Vitals announced by Google that will influence the positioning in the SERP in the future.
Websites hosted in SiteGround are already in the Google Cloud platform, and with WebP you will be far ahead of your competition hosted in other companies.
Read this post in Spanish: Cómo servir gratis imágenes WebP en SiteGround
