Why and How to Use WebP Images in WordPress?

Page speed and website performance are some of the best indicators of a well-functioning and robust website. Web developers are continuously searching and trying to find the next best approach to ensure optimal performance and improve loading speed of a website. One of the key things to make this happen is through image compression. A modern image format by the name WebP, has revolutionized image compression as this type of image has the capability to yield image files that are of the same quality or even higher for a smaller file size. Essentially, you will have an image with much less file size without compromising the quality or reducing its resolution. A win-win, right?

Related: How to regenerate thumbnails in WordPress?

WebP Images

WebP images were first announced by Google in 2010 as a compressed alternative to other image formats such as JPEG, PNG, and GIFs. By late 2018, the file format was made open for anyone to use on the internet. The popularity of the WebP images has grown over the course of the years, and now almost 96% of web browsers support this image file format.

Now, you might be thinking, how are WebP images different from other image formats? Well, the key difference comes in the form of what the image constitutes. Unlike other image formats, WebP images don’t store each and every pixel of the image, instead, they use a technology called “predictive coding” which essentially means that WebP just decodes the difference between surrounding pixel blocks by predicting the values of said blocks. Similar to other image file formats, WebP images can be further compressed or shrunk with or without tampering the quality.

Why to Use WebP Images?

Though WebP is an optimized image format, it is an additional work to use this on your site. However, you do not have option as Google PageSpeed Insights tool will warn you to when using traditional PNG or JPEG images. You will see the warning message like below showing “Serve images in next-gen format”.

As you can see in the above warning, there are images from external sites loaded as part of Google AdSense advertisements. Unfortunately, you can’t optimize the images loaded from third-party sites and what you can focus is to use WebP on your WordPress site and lazy load them to improve the page loading speed.

Using WebP images on WordPress

If your website is built on WordPress, there is good news for you. WordPress supports the WebP image format, which means you can directly upload WebP images on your WordPress site’s media library. This helps to reap the rewards of auto-optimized images and accelerated page speed, leaving your website audience amazed and satisfied with their browsing experience.

There are two different methods that you can apply to use WebP images in WordPress.

• First option is to manually create WebP images or convert another image file type to WebP and then upload it to the website.
• Second option is to make use of a plugin to automate the entire process.

We’ll go over both of these in greater detail below.

1. Upload WebP images via creation or conversion

Most photo editing software don’t allow images to be saved in WebP format. Even the most popular and widely used photo editing software of all time, Adobe Photoshop, doesn’t allow this. However, as always there is a work-around. By installing the WebPShop plugin, you’ll be able to open and save WebP images directly from Adobe Photoshop. But, if you don’t want to go through all that trouble, then converting common image formats such as JPEG, or PNG to WebP is your next option. To make it easier for you, just use one of the online image converters listed below, and they will do the job just fine.

• WebP Converter
• ezGIF
• Convertio

So, now that you have a WebP image with you, it’s time to upload it to your WordPress website. Uploading the image itself is straightforward and the same steps apply as they would when uploading any other image type. Like we mentioned before, WordPress supports WebP images, so you can just upload it to the media library and access it from there. If you are creating a blog post for example, just add an image block and then upload the WebP image of your choice to the block. Simple, isn’t it?

2. Upload WebP images via plugins

The second option if you want a more convenient and time efficient approach would be to use a plugin. Let’s face it, no one wants to convert each and every image before uploading them, right? If only there was a way, we could just upload any regular image and it would automatically turn into a WebP image. Wouldn’t that be great? Well, that’s exactly what the plugin will do for you. Furthermore, most good image optimization plugins also offer bulk-optimization capabilities, which means you will be able to optimize all images on your media library to the desired format in one go. Cool, isn’t it?

Now, the next question is which image optimization plugin is best for your WordPress site? In our opinion, Imagify is the go-to image optimization plugin.

• This is a great image optimization plugin option, and perhaps the most popular too with over 500,000+ active installations to date.
• The plugin offers great features such as automatic image optimization upon uploading, image conversion to WebP format, Bulk Optimizer to optimize images site-wide in just a single click, as well as different levels of optimizations depending on your goals and preferences. The free version of the plugin proves a monthly quota of 20 MB for free image optimizations, which roughly equates to 200 images per month.

To enable the plugin, follow the instructions provided below:

• Open your WordPress admin portal and head to “Plugins > Add New” menu.
• Search for Imagify by entering the plugin name in the keyword search bar.
• Install and then activate the plugin.
• Open the Imagify settings page, and then enter your email to get the API key. You will not be able to use the Imagify plugin without the API key, so this is an essential step.

• Go to the “Optimization > WebP Format” section and enable “Create WebP version of images” checkbox.
• You have two ways to serve WebP images – one is to use rewrite rules by adding a server configuration file and other is to use <picture> tag instead of <img> tag.

• Most shared hosting servers will not support rewrite rules setup and hence select the preferred <picture> option. However, make sure to test your site is working properly as themes and plugins try to use <img> tags for images which may break the images display.
• After selecting your options, click on “Save & Go to Bulk Optimizer”. Now you have the chance to optimize all of your existing images on the website to WebP format.
• Click on the “IMAGIF’EM ALL” button as shown below.

• And that’s it, all of the images on your website are now optimized and the website will use the WebP format of said images.

2.1 Using Hosting Provided Setup or Plugin

Nowadays, many hosting company offers WebP as part of the server side setup. For example, SiteGround hosts more than 2.8 million sites and if you use them, there is a dedicated SiteGround Optimizer plugin for enabling WebP images on your site.

• SiteGround Optimizer plugin comes by default with all WordPress installations in SiteGround. Therefore, you do not need to separately install the plugin.
• Go to “SG Optimizer > Media” section and enable “Use WebP Images” option under “Compression Settings” section.

Final Words

We hope you enjoyed this article and learned the importance of using optimized WebP image format. We have also explained how to use WebP images in WordPress and select the manual upload or plugin option that suits your working style. If you opt for plugin, make sure your site is working fine after setting up and the server supports your setting.