Google is the dominant search engine among English speaking users. Due to this fact, WordPress site owners seriously follow the guidelines and opportunities shown in Google PageSpeed Insights tool. One of the popular warning message in PageSpeed tool is to fix images served in traditional format to server images in next-gen formats. In this article, we will explain how to fix this warning in WordPress sites to optimize your images.
Warning in Google PageSpeed Insights
Go to Google PageSpeed Insights tool page and test your webpage’s URL. You should see an opportunity showing “Server images in next-gen formats” like below. You can see the potential size savings for each image and the estimated savings in page loading time.
Note: Google says, this is an opportunity and will not affect the PageSpeed performance score. However, removing this warning considerably increases the score in reality.
Next-Gent Image Formats
Before we move on, you have to understand the image formats. There are three traditional and popular image formats:
- Joint Photography Experts Group (JPEG or JPG) – supports lossy compression
- Portable Network Graphics (PNG) – supports transparent and lossless compression and replacement of GIF
- Graphics Interchange Format (GIF) – a bitmap format supports looping multiple frames.
Now, there are new next-gen formats recommended for websites:
- WebP – developed by Google for better compression
- JPEG 2000 – improvement from JPEG standards in image compression
- JPEG XR – JPEG extended range format developed by Microsoft
You can check the Google’s gallery to compare various images visually. The next-gen formats help to reduce the size of images considerably thus increasing the page loading speed. As per Wikipedia, 92% of browsers support WebP format making it a promising replacement for the traditional format. Therefore, you have to start using WebP format to get rid of serve images in next-gen formats warning in PageSpeed Insights tool.
Conversion of Image Formats
Though Google pushes the lightweight image format, they are not very popular with application developers. Many applications do not support creating images in these formats. For example, SnagIt – the popular screen capturing tool for bloggers – does not offer any option to create images in next-gen format. You can create in traditional format like PNG or JPEG.
Now that it is difficult to find an application for creating next-gen image formats. Instead, you can upload PNG or JPEG images on your WordPress site and use a plugin to convert them into one of the next-gen image formats. This is an effective and easy way as you do not need to change your working model.
Since, Google is the proprietary owner of WebP format, many plugins support converting traditional images to WebP format. Here, we will explain how to convert your images to WebP and fix “serve images in next-gen format” in PageSpeed Insights tool.
WebP Plugins for WordPress
There are quite a few popular plugins available for WebP conversion.
SG Optimizer for SiteGround
If you are hosting on SiteGround, the best option is to use SG Optimizer plugin. This will work out of the box to convert and serve WebP images from your server. You can choose the level of compression to control the quality of the converted images while retaining all original images. Check out our earlier article on how to serve WebP images in SiteGround.
- You can simply enable “Generate WebP Copies of New Images” option under “SG Optimizer > Image Optimization” section.
- Click on “Bulk Generate WebP Files” button to generate WebP images for all your existing images with lossless or pre-defined lossy compression level.
Smush is another popular image compression plugin with more than 1 million active installations. However, WebP is a premium option in this plugin and you have to pay a $5 per month (yearly plan) subscription for using this feature.
This plugin offers on the fly image optimization with WebP conversion using ShortPixel CDN service. Though this is a good option to combine CDN and WebP, there is a catch. You have a limit of serving up to 100 images per month for free. If you need more, you have to pay $3.99 per month to start the premium plan for up to 5000 images. This will be a costly option when you want to compress and serve large number of images. If you want to test Autoptimize, after installing and activating the plugin, go to “Settings > Autoptimize > Images” section.
- Enable “Optimize Images” checkbox.
- Choose the image optimization level as glossy, lossless or lossy.
- Check the box that says “Load WebP or AVIF in supported browsers?”
- Enable “Lazy-load images?” checkbox.
Click on “Save Changes” button and test your site PageSpeed Insights tool. You should see the warning “Serve images in next-gen formats” is disappeared now. However, you will start seeing a warning message in the WordPress admin panel that your ShortPixel quota is used and asking you have to upgrade the plan.
Free WebP Plugins
Fortunately, there are few free plugins available like WebP Express and WebP Converter for Media. In this article, we will explain the process with WebP Converter for Media plugin.
Install WebP Converter for Media Plugin
Login to your WordPress admin panel and navigate to “Plugins > Add New” section. Type “webp” in the search box to filter the results and find out WebP Converter for Media plugin. Click on “Install” button and then activate the plugin on your site.
Enable WebP Image Conversion
After activating the plugin, you will see a message like below and click on “Speed up my website” button. Alternatively, you can go to “Settings > WebP Converter” menu to reach the plugin’s settings page.
- Select the image loading mode as “via .htaccess (Recommended)”.
- Choose JPEG, JPG and PNG for supported file extensions.
- For list of supported directories, choose “/uploads” option. Make sure you are serving the images from default WordPress uploads folder. If you have moved your images to subdomain, then select that directory so that the plugin will work properly.
- For the conversion method, choose “GD (recommended)” option.
- Finally choose the image quality as per your need. The plugin uses 85% as the default quality value for WebP conversion.
The plugin also uses some extra features for additional image optimization. You can leave the default values as it is or check and enable/disable the needed values for your need. For example, you can choose the browser caching for WebP files which we recommend and choose the removal larger WebP files. Click on “Save Changes” button after selecting all your options.
WebP Converter for Media plugin also offers an option to regenerate all your images for converting them into WebP format. This is useful if you have images uploaded on the site before installing the plugin.
Check in Google Chrome
After regenerating all existing images, you can open the website in Google Chrome and check. You should see the WebP images are served from the developer tools section. You can check this article on how to check WebP images are served on Chrome browser. If you have enabled browser caching, simply copy the image URL and see the file name contains .webp.
Server Support Issue
Unfortunately, not all web servers support WebP conversion. You can find this if the “Conversion method” section is disabled under the plugin settings. Your server should have supported GD or Imagick library installed in order to support WebP format. Otherwise, the plugin will show error and you should not be able to use WebP conversion. As far as we have tested, Bluehost shared hosting servers do not support WebP conversion and you will see an error message like below.
In this case, you have to discuss with the host to enable the needed support for WebP images.
Enable Caching for WebP Images Using WP Rocket
As mentioned, WebP Converter for Media plugin offers an option to enable browser caching for WebP images. This will help you to speed up the page loading by instructing the browsers to cache the images when user opens the same images again. However, this option is not available with many other plugins and you should combine this with your caching plugin’s settings. For example, if you are using WP Rocket, make sure to enable the checkbox for browser caching under “Images” section. This will enable the plugin to cache WebP images and serve on the supported browsers.