How to Use WebP Images With Divi

The WebP image format has gained a lot of traction over the past couple of years. More and more webmasters are choosing to use WebP images on their websites instead of the traditional JPEG or PNG formats. This is mostly because WebP images have a smaller footprint all the while delivering the same quality as PNGs and JPEGs.

We have put together an overview of WebP images and we will show you how you can implement the image file format on your Divi and WordPress websites.

So without further ado, let’s get started:

What is the WebP image format?

You should already be familiar with JPEGs (or JPGs), PNGs, and GIFs – the three most popular image formats used on the web. Well, WebP is another, relatively new option, developed by Google and released back in 2010.

The image format has been particularly developed for internet and website use. It utilizes both “lossy” and “lossless” image compression algorithms.

Using lossless compression, WebP images manage to retain the same level of data as the existing image format – JPEG or PNG. Whereas, thanks to its lossy compression algorithm, the size of the WebP Images is significantly smaller.

According to Google’s WebP Compression Study, while maintaining the same picture quality:

• WebP images are 24-35% smaller than JPEGs. (on Average)
• WebP Images are 26% smaller than PNGs. (on Average)

WebP vs JPEG

Here’s the Google WebP Gallery where you can compare WebP file formats to their PNG and JPEG counterparts and see the difference for yourself.

Why you should use WebP images?

The WebP image format has been pushed by Google for mass adoption, and if you own a website, you should convert your existing JPEGs & PNGs, and start using WebPs instead. Take your image optimization to the next level and you will see some great benefits.

Here are the top three benefits you will get from using WebP images:

• Smaller File Size: The most immediate advantage of using WebP images is its smaller footprint. As such, if your web host gives you limited storage space, then switching to WebP means you will have more free space for other files, plugins, or themes.
• Faster Site Loading Speeds: Because the WebP images are smaller in size, it takes less time to load them on a browser. And considering the fact that most websites are almost 50% images, using WebP images will help boost your Divi site’s loading speeds.
• Better SEO Score: As you should already know, your site’s loading speeds directly influence your SEO score – primarily Google Page Rank. And since WebP images help improve your site’s loading speeds, it indirectly helps boost your SEO score, resulting in more traffic to your website.

Browser support for the WebP image format

You can replace all the PNGs and JPEGs on your WordPress website with WebPs. However, if the visitor’s browser doesn’t support WebP, then they will not be able to see the images. This is by far one of the biggest hurdles for mass adoption of the WebP image format.

That being said, since its inception in 2010, Google has been pushing the WebP image format to make it more popular across the internet.

Currently, almost all modern web browsers support WebP images. This includes Google’s own Chrome browser, and all other Chromium-based browsers like Brave, Edge, Vivaldi, Opera, and the lots. Firefox for desktop also supports WebP images.

As you can see, WebP is supported by mostly all the popular web browsers. In fact, around 95% of all internet users are currently on a browser that supports WebP.

WebP Browser Support

So, which browsers don’t support WebP?

Well, mainly internet Explorer, but that browser is on its way out. Microsoft will replace it with the new Edge browser, which does support WebP.

And for Apple users, Safari 13 or older also doesn’t support WebP.

Other than this, mostly a few obscure browsers don’t support the WebP file format.

Overall, if you switch to WebP, almost all internet users will be able to see your images. But still, you might not want to dismiss the ~5% of users on a WebP non-compatible browser.

This is why in our tutorial, we will show you how you can use WebP images on your Divi website while having JPEG/PNG as a fallback.

How to use WebP images with Divi

With WordPress 5.8, users will have native support for WebP images. This means you will be able to directly upload WebP images to your WordPress Media Library. From there you can add it to your posts and pages directly, just like you do with PNGs and JPEGs.

However, if you add WebP images like this, then users coming from WebP non-compatible browsers won’t be able to see them. As such, you need a way to deliver WebP images to supported browsers, but then fall back on JPEG/PNG for the non-supported ones.

Now there are three main ways you can do this. We have highlighted all of them in the below sections. Each one of them is equally effective, and you can pick the one that best suits your specific WordPress installation.

Use the WebP Express Plugin

As is the case with everything related to WordPress, if you face a problem, there’s probably a WordPress plugin to help you out.

Now, Elegant Themes suggests using the Optimole plugin to auto-convert and deliver your JPEGs and PNGs as WebP to visitors on compatible browsers. However, the free version of the Optimole plugin only supports image conversion for up to ~5000 monthly visits.

This limitation can be a bit problematic for some website owners who are looking for a strict free option. As such, our recommendation is the WebP Express Plugin. The plugin is free to install straight from your WordPress backend dashboard.

Once installed, you can set to auto-generate WebP images for all images in your media library, galleries, as well as the installed theme. It will automatically deliver the converted images to browsers that support the WebP format. But best of all, it can also detect incompatible web browsers and will serve JPEGs/PNGs to them.

WebP Express Plugin

To learn more about the WebP Express plugin, visit their page here.

Alternative Plugins

In case you don’t like WebP Express and want some other options, here are a few notable alternative plugins that you can try out:

• Optimole
• ShortPixel
• Imagify
• EWWW Image Optimizer

Use the Jetpack plugin’s “Site Accelerator” feature

If you are trying to improve your Divi site’s loading speeds, installing a bunch of extra plugins isn’t the best option. If that’s the case, and you don’t want to install an extra plugin for using WebP images, then maybe you can use one of your already installed plugins.

The Jetpack plugin comes from the developers of WordPress themselves and is a recommended plugin for almost all WordPress websites. If you too are using Jetpack on your site, then you can use it to automatically convert and deliver JPEGs/PNGs as WebPs to your visitors.

All you need to do is login to your WordPress backend, and then from the lefthand sidebar, navigate to Jetpack > Settings > Performance and then under the Performance & Speed section, turn on “Enable Site Accelerator.”

Jetpack Site Accelerator

This will automatically serve WebP versions of your images to your visitors if their browsers support the image format.

Use a CDN (Content Delivery Network)

If you are really keen on improving your site’s loading speeds, then you might have a CDN running. In that case, you won’t need to install or rely on any extra plugins to use WebP images. Mostly, all the popular CDN service providers support the option to auto-convert and deliver JPEG and PNG images to WebP whenever possible.

You can also use Cloudflare CDN. Users on their paid subscriptions have access to the Polish feature, which is an automatic WebP conversion tool.

Alternatively, if you are hosting your Divi website with Kinsta, then you will have access to the Kinsta CDN. It will let you auto-convert and deliver your regular JPEGs/PNGs to WebPs without you having to lift a finger.

Wrapping up

So that was our quick tutorial on how to use WebP images on Divi. We hope you found this read useful and that it finally helped you in understanding the benefits of the WebP file format, and how to use it on your Divi website.

As you have seen, WebP brings to you the same image quality as JPEGs and PNGs, but at a much smaller footprint. This means it will take up less space on your website, will load quicker on your visitors’ browser, and will also indirectly boost your SEO score.

However, despite all its benefits, it’s still now the de facto image format. Currently, 95% of all modern web browsers support WebP. As such, if you don’t want your website images to not read on the remaining 5% browser, you need to deliver WebP images in such a way, that there’s a JPEG/PNG fallback in case of an incompatible browser.

To do this, you can take advantage of WordPress plugins like WebP Express, which will automatically convert your website images into WebP and deliver them whenever there’s a supported browser. Alternatively, you can also use the “Site Accelerator” feature on the Jetpack plugin to help you. Also, all the major CDN providers support WebP image conversion and delivery, so you can take advantage of that as well.