Is Google upset that you are not serving images in next-gen formats like Webp?
One of the Google PageSpeed Insight most often suggestions to accelerate page speed and performance is to “serve images in next-gen formats”. If you have ever checked your site on Google PageSpeed Insight or Lighthouse you must have received the same suggestion. Next-gen image formats are image formats that offer superior compression and quality compared to regular image formats such as JPG and PNG.
In this post, I am going to show you what next-gen image formats are and how you can serve next-gen image formats on your site. We will learn how to convert your images into Webp and how to serve them on your site for browsers. So before we move on, first you have to understand what are next-gen image formats.
So let’s get started
What are the next-gen image formats?
You should be familiar with three traditional and popular formats of images such as JPEG, GIFs, and PNG. We have been using them for years. Though they are quite popular among users however they still have some drawbacks that cause speed issues on your site. That’s why Google recommends converting your images into next-gen formats such as webp, which loads faster and provides excellent site performance.
Next-gen image formats are modern formats that are compressed in a way that are faster and high quality. Since they are smaller in size which means they significantly decrease your overall page speed. So with next-gen formats, you can serve images of high quality the same as JPEG at a much smaller size.
There are different next-gen formats including JPEG 2000, JPEG XR, and WebP. Among all, webp are the most common, creating versatile, high-quality images that are smaller than both JPG and PNG. Not all browsers support each type of next-gen format as chrome and firefox load webp files while safari does not. Simultaneously, Safari support JPEG 2000 while Firefox and chrome. Despite the fact, the overwhelming majority of people using chrome makes the webp the most accurate and lightweight option.
Why use next-gen image formats?
Since images play a crucial role in attracting visitors and improving the user experience on your site. So when you have a bulk of high-quality images on your site, they ultimately reduce your page speed and increase the time to render the page content. To reduce this image size and loading time Google PageSpeed Insight recommends next-gen formats that can help to improve your site performance and page loading.
Also, Webp is three times smaller in size and serves the same quality as JPEG and PNG. Thus, using these formats not only provide high-quality images with smaller size but also support transparency and animation.
Basically, the most obvious reason to use next-gen formats is to reduce the image size in kb. These images provide better compression and image quality. Thus, using these formats not only reduce the size of images without affecting quality but also provide search engine optimization benefits.
How to serve images as next-gen formats?
Converting the images to next-gen formats is really simple and doesn’t take much time. It is easy since many online tools can do your work. There are several suitable methods to do this conversion, but I will show you the most efficient methods that I have tried so far.
1. Use an online tool to convert images
Of course the far easiest and efficient way to convert the images without putting your hand on coding is using an online tool. There are various options. However, CloudConvert’s WebP Converter is the popular one. It is pretty easy to work with this excellent tool. Just, upload the image, convert it to webp and download again. Your image is converted to next-gen format. Now upload it to your WordPress site and use it wherever you want.
2. Use a WordPress Plugin
Another easy way to convert images to next-gen formats is using a WordPress Plugin. So if you don’t want to work with coding or any other above online tool, WordPress plugins have some great options that work perfectly. WordPress does not support uploading webp format images through the image library. So when you try to upload an image .webp format, a window popup says the format is not supported. But you can change your images to .webp format using plugins.
One of the best plugins to do this conversion is WebP Express Plugin. Install and activate this plugin. It will add a line of code to your WordPress site that will automatically convert the images to webp format for users, whose browsers supports this format. That means, if the visitor’s browser supports the webp format it will convert it to that format, if not it will serve the image with the original format the image was uploaded.
3. Edit .htaccess file on your site
Since the basic purpose of serving the image with next-gen formats is to reduce the file size and increase page speed adding a new plugin might seem counterproductive. So if you don’t want to use any plugin, you can simply edit the .htaccess file on your WordPress site. But only use this method if you’re comfortable working with code. Add the following snippet to your file, it will serve .webp image instead of PNG and JPEG. Note that the automatic conversion works precisely only if the JPG and webp images are present in the same folder.
<IfModule mod_setenvif.c>
# Vary: Accept for all the requests to jpeg and png
SetEnvIf Request_URI “\.(jpe?g|png)$” REQUEST_image
</IfModule>
<IfModule mod_rewrite.c>
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]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
The Final Words
If you really want to boost your page speed and performance then take a look at next-gen images.
Though, all browsers don’t support that same format, webp is the most accurate choice as chrome supports it well. So convert all the images on your site to webp and enjoy a better user experience without compromising on image quality. Use the above-mentioned methods and don’t forget to share your feedback in return.
Have any questions, just drop a line in the below comment section, we would love to help you further.
Need Help?
Know your websites slow and worried about Google reducing your visibility due to image issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.
