When you run PageSpeed Insight on your website the site has definitely recommended you to “Serve images in next-gen formats“. And you might be thinking about what is next-gen images and how they are different from our current images. In this article, I will clear all your doubts and explain how to implement them properly on your WordPress website.
What does serve images in next-gen format mean?
After seeing this recommendation on PageSpeed Insight you might be thinking what does this mean? Well, this means google wants you to have your website images in the next-gen format, and the next-gen means image formats like JPEG 2000, JPEG XR, AVIF, and WebP format.
What is the benefit of using the next-gen formats?
These image formats are very smaller in size than general image formats such as JPEG and PNG while maintaining the almost identical image quality. These images can be up to 3 times smaller than normal image files with nominal quality loss. Since they are smaller in size so they will take less time to load and can increase your website performance.
What are the drawbacks of using these image formats?
Just like everything in this world these image formats also have some drawbacks of using these image formats. One of the major drawbacks of using these images is their browser support, also after the compression images won’t look as good as a normal format. So always cross-check before converting your images.
Another thing to keep in mind the conversion of JPEG or PNG to next-gen format is easy but serving these images on site is not so easy especially if you wanna avoid using plugins.
Next-gen image formats
Now let’s understand what are these next-gen image formats. There are four major next-gen image formats that are recommended by PageSpeed Insight. Let’s take a closer look at them.
1. WebP
WebP is by far the most popular and most widely used next-gen image format currently. WebP is developed by Google and it can reduce your image size both in a lossy and lossless format. WebP supports transparent images such as PNG and a good alternative to PNG.
For lossless comparison, WebP can reduce image size up to 26% smaller and for lossy compression, the file size can be smaller up to 3 times the actual image size.
Now as for browser support it supports most modern browsers, and it is fairly easy to compress the images. You can see the complete chart in the image above which browser supports this image format.
2. JPEG 2000
JPEG 200o is another next-gen image format, it is superior then JPEG and offers much more quality than JPEG. It also supports lossless and lossy compression. However, because of very poor browser support, it is not recommended to use them for now. You can check the browser support chart below.
3. JPEG XR
The third next-gen image format which is recommended by PageSpeed insight is JPEG XR. This image format is developed by Microsoft. It has many advanced features which makes it very useful but it is not being used widely cause of very poor browser support as you can see in the image below.
4. AVIF
Another promising next-gen image format is AVIF. This image format is by far the most advance than the formats mentioned above. However, many browsers still don’t support it yet, but it is coming up in many browsers and has the potential to be popular, but it’s not ready yet.
Which format you should choose?
You are maybe wondering which next-gen image format should I choose? And the answer to that is WebP. Let’s understand why?
- The main and most important reason behind using WebP is the browser support. WebP is currently supported by 95% of browsers.
- It is being developed by Google, don’t get me wrong it is being developed by Google doesn’t mean its some kind of gold standard or something reason is our primary objective is to get traffic and ranking in Google can help a lot and since WebP is developed by them it can have some benefits in ranking.
- The WebP can also be used for Animated Images.
That’s why in the rest of the article I am going to focus on WebP only.
JPEG vs PNG vs WebP
Now let’s try to compare the image quality and size of all of these image formats. So first let’s compare the quality and size of the transparent images. Since JPEG doesn’t support transparent images it is out of the race.
As you can see in the image above there are not many visible differences between these three images. But the sizes of these three images are very different. You can check the detailed comparison here.
Now let’s see how WebP performs against JPEG format. As you can see in the image above WebP image is a lot smaller than the JPEG image. You can check the detailed comparison on this link.
How to convert images into the next-gen format?
Now let’s know how we can convert our JPEG and PNG images into WebP format. We are going to look into three different methods of converting JPEG and PNG into WebP.
- Command-line API tool: Google provides a repository that you can download from the official Google developer website. And use it on your command line to convert images into WebP. You must need to be familiar with the command line operation to use this method. You can check the full details at this link.
- Online tools: There are several online websites available where you can convert your JPEG and PNG images into WebP images. Such as Squoosh, WebP Convert, Cloud Convert, Image Online Converter, and so on. Choose any and you would be able to convert your images into WebP.
- WordPress Plugins: There are several plugins available to do this job for you. We will talk about plugins later in this article below.
How to serve images on a WordPress website?
Now since our primary goal is to use WebP on our WordPress website let’s know how we can achieve it on our WordPress website.
1. Manually
When you try to upload a WebP image on WordPress you will see the warning “Sorry, this file type is not permitted for security reasons”. If you choose to select an image from your storage you might even not see WebP images to choose and upload.
WordPress by default doesn’t allow us to upload WebP images we need to make some changes to be able to do that. We can achieve this with two methods either by adding some code in our functions.php or using plugins. So let’s know about both of them.
1. Code: To add code go to your website’s dashboard navigate to Appearance > Theme Editor and add the code given below and click on Update the file. Now you should be able to upload WebP format images on your WordPress website.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// Add support for WebP image formatfunction webp_upload_mimes( $current_mimes ) {$current_mimes['webp'] = 'image/webp';return $current_mimes;}add_filter( 'mime_types', 'webp_upload_mimes' );// Display WebP images in Media Libraryfunction display_WebP($result, $path) {if ($result === false) {$displayable_image_types = array( IMAGETYPE_WEBP );$info = @getimagesize( $path );if (empty($info)) {$result = false;} elseif (!in_array($info[2], $displayable_image_types)) {$result = false;} else {$result = true;}}return $result;}add_filter('file_is_displayable_image', 'display_WebP', 10, 2); |
2. Plugins: There is a plugin available that can enable WebP images to upload on your website, this plugin is called Allow WebP Images and it is available for free.
Now you can upload WebP images and even replace your old images with a new one since it is enabled now. But there are some drawbacks of using this approach. The major drawback of using WebP directly is when a user visits your website from a nonsupported browser he sees nothing empty or if you have any alt text.
But there are some plugins available that can convert your already uploaded images into WebP format, and also they can serve normal JPEG and PNG images if WebP is not supported by visitors’ browsers.
2. Plugins
There are several plugins available to serve WebP images on your website. Here are some best ones.
1. WebP Express
WebP Express is a great free plugin and will do everything for you automatically, you just need to go to the plugin store search for “WebP Express” install and activate it and now you are good to go. All your images will be converted automatically and once the conversion is complete the plugin automatically starts serving images automatically.
A similar plugin that requires no extra work is the WebP Converter for Media plugin.
2. ShortPixel
Short pixel is an amazing plugin it is free to use and has some paid plans also. This plugin is a complete image compressing solution it can compress, your images and not just in WebP but also in JPEG 2000, JPEG XR, and AVIF. This plugin is pretty powerful and has very good customer support.
As for the price, ShortPixel gives 100 free credits per month and additional credits can be bought for $4.99 for 5,000 image credits.
3. Edit .htaccess
Another way to serve WebP on your WordPress website without using any plugin is to use the .htaccess file. But this method is only recommended for people who are ready to make changes to their website and are familiar with coding basics.
To serve WebP images to your visitors copy the code from below and paste it into the .htaccess file of your website which is located on your website’s root directory.
# Vary: Accept for all the requests to jpeg and png
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
RewriteEngine On
# Check if browser supports WebP images
RewriteCond%{HTTP_ACCEPT}image/webp
# Check if WebP replacement image exists
RewriteCond%{DOCUMENT_ROOT}/$1.webp-f
# Serve WebP image instead
RewriteRule(.+)\.(jpe?g|png)$$1.webp[T=image/webp]
Header append Vary Accept env=REQUEST_image
AddType image/webp .webp
One thing to keep in mind in order to make it work your WebP files should be in the same folder as your normal JPEG or PNG file.
4. Use <picture> tag
Another option to serve WebP images on your website is to use the <piture> tag instead of just using the normal <img> tag. The picture tag will give you the option to use multiple formats of images on the same location and it will load the image based on users’ browser support.
Here’s an example of how you can do that.
<picture>
<source type=”randomimage/webp” srcset=”randomimage.webp”›
<source type=”randomimage/jpeg” srcset=”randomimage.jpg”›
<img src=”randomimage.jpg” alt=”example”>
</picture>
As you can see picture tag work as a wrapper around img tag, and if the browser doesn’t support picture tag it will automatically switch to img tag.
Wrapping up
With the methods above you have understood what is the next-gen format and how you can use them on your website. Do keep in mind that always have a backup before converting images because you may not be able to recover them. Also, make sure to check the images properly after changes and preferably on multiple devices.
Since you are doing all this for better page speed and a good ranking on PageSpeed insight, I will highly recommend you to check out our other WordPress PageSpeed articles.
