How WebP Images work in WordPress

We have already mentioned on more than one occasion that the loading speed of our website is a key factor when it comes to positioning it well in search engines. And although you may not need to hit top on Google Speed, any effort related to image optimization is particularly critical in improving SEO.

The WordPress community is well aware of this, and for this reason, in the latest version 5.8 it added the functionality to support the WebP image format.

What Are WebP Images

WebP is an image format developed by Google in 2010 to be an alternative to formats such as PNG and JPG, producing much smaller file sizes while maintaining similar image qualities. Unlike other formats, WebP supports lossy and lossless compression, as well as transparency and animation.

Even with these features, WebP always offers smaller file sizes than its alternatives. In a Google comparative study of these image formats, WebP lossy images were found to be, on average, 30% smaller than JPGs and 25% smaller than PNGs.

In addition, Google PageSpeed Insights, which is an evaluator of the optimization level of your website, recommends that you use modern image formats as one of the opportunities to improve the loading speed of your website.

One of the questions you may have when considering whether you should have all images in WebP is the current support for different browsers. The last thing you would want is for your readers to not be able to see the images properly.

And the reality is that the support in each of them is increasing. Currently, we are already talking about 95% support.

How to Convert Images to WebP

To upload a WebP image to the library, obviously, the first thing we must have is said image in the format in question. If you download an image from an image bank, you will surely download it in JPEG or PNG format. So your first task will be to convert the image to that format. What alternatives do we have?

Nelio Forms

A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.

Wajari Velasquez

WordPress.org

Free Download

Premium Version

Image Design Tools

Some image design tools, such as Sketch, Adobe Photoshop, or Cloudinary, among others, include the option to save any image in WebP format. It’s as simple as opening the image you want to convert and then saving it in the new format.

But if this is not your case, don’t worry because you have free alternatives, as we will see below.

Official Google Tool

Another option is to download the cwebp, a tool for Linux, Widows, or Mac to convert any PNG or JPG image to WebP. Once downloaded and installed, you can directly execute the instruction to convert any image on your computer. So, for example, you can convert a PNG image file into a WebP image with a quality range of 80 with the command:

cwebp -q 80 image.png -o image.webp

If you need to convert a lot of images at the same time, this article explains the instructions, in a Unix-like environment (such as macOS or Ubuntu), so that you can convert a large set of images.

And in the same article they also tell you about the alternative of programming the conversion with Node.js using the imagin-webp tool.

Online Converters

Another alternative if you don’t want to write a single line of code is to use an online image converter. Googling easily brings up a long list of converters, including the following:

• Ezgif Webp
• Cloudconvert
• Convertio
• Online-Convert
• FreeConvert

In all of them, you only have to upload the image, perform the conversion and download the converted file.

WordPress Plugins

Finally, as I will explain below, you will see that also there are plugins that convert images to WebP format when you upload them to your WordPress site.

How to Upload a WebP Image to the Media Library

Once we have the image in this format, you should be able to upload it to your WordPress media library as usual, but…

Oops, it doesn’t work! At least, it didn’t for me. And you might face the same issue depending on the hosting provider you’re currently using.

WordPress has a built-in limitation on MIME file types you can upload to your site for security reasons. MIME stands for Multipurpose Internet Mail Extensions. MIME types are used by browsers and other Internet devices to determine the type of content associated with a page. For example, if you have a .png file and a .jpeg file on a page, the browser will know from their MIME types (not their file extension) that it should treat both files as images, rather than videos or other file types.

By default, WordPress stores a list of registered MIME types in wp-includes/functions.php. However, not all recognized MIME types can be uploaded.

And if you try to upload a file with an extension outside of this predefined list, as is the case with WebP, you will see the above error message.

In the documentation of your hosting company, you will find several alternatives to modify how to allow you to upload this new MIME type. This is usually by using a plugin with which you can add extra file types or directly modify the file, or use your own plugin with the following code:

function nelio_custom_upload_mimes( $existing_mimes ) {
  $existing_mimes['webm'] = 'image/webm';
  return $existing_mimes;
}
add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

Or, alternatively, modify the wp-config.php file, adding the following line of code:

define( 'ALLOW_UNFILTERED_UPLOADS', true );

Once you have made the necessary modifications, you should be able to upload your image. Next attempt…

Well, it seems that it will not be possible either…

In this case, as discussed in the WordPress forum, for some the solution has been to make sure that the imagick library was installed and reboot the server. For others (as in my case), the only way to load the image was to use the browser-uploader link that you find at the bottom of the load images panel.

And voilà, I have my WebP image uploaded!

WordPress Plugins to Convert Images to WebP

I have already told you about the space and load saving of having the images in this WebP format. And the problem arises when we think about how to convert all the images that we have already uploaded on our server. The good news, as a great majority of times in WordPress, is that we have several plugins that can do this job.

And not only this, some of them, before uploading any image to your library, can force the conversion of the image to WebP, without your having to worry about it. Some of the best known are:

• EWWW Image Optimizer
• WebP Express
• ShortPixel
• Imagify
• Optimole
• WebPConverter for Media

Finally, I would like to note that the main WordPress hosting companies are very aware of the importance of having optimized images on your website. For this reason, some of them already offer their own plugins built into their servers that are responsible for automatically generating the images that you upload to the library to WebP so that they are always served to the browsers that support them. This is the case, for example, of Siteground’s SG Optimizer plugin.

Conclusion

The WebP is fast, efficient, and gaining a lot of momentum. We are surely closer than we think to its mass adoption in WordPress and browsers. We are happy that WordPress is not left behind and that we can all optimize the SEO of our websites by supporting the WebP image format.

Featured image of marina on Unsplash.