Table of Contents

Are you wondering how to use WebP on WordPress and how to convert your current images in the WordPress library? You’ve come to the right place! 

If you run a web performance on PageSpeed Insights, you may see the recommendation to serve images in next-gen formats to boost performance. Google is telling you to forget about JPEG and PNG and focus your image optimization efforts on image formats like WebP.

Google’s recommendation: Serve images in next-gen formats - Source: PageSpeed Insights
Google’s recommendation: Serve images in next-gen formats – Source: PageSpeed Insights

This guide explains how to solve this warning and everything you need to know about WebP on WordPress. You’ll also get a list of the best tools to convert almost any format to WebP. 

What’s WebP Image Format?

Created by Google, WebP is a next-gen format for the web. It provides superior lossless and lossy compression for images while preserving quality. Compared to the traditional JPEGs or PNGs, this modern format allows you to create even smaller file sizes, resulting in a faster loading page.

WebP format - Source: Photopea
WebP format – Source: Photopea

WebP vs. PNG vs. JPEG

If you are hesitating between the three formats and care about performance, choose WebP to serve optimized images on WordPress. You’re going to understand why. 

JPEG vs. WebP 

Both file formats compress images to make them easier to share on the web and preserve their quality. They look quite similar, so why choose WebP? 

A WebP file is generally much smaller than a traditional JPEG. According to Google, a WebP image with lossy compression could be 25% to 34% smaller than a comparable JPEG file. 

Have a look at the figure below: WebP (in red) achieves better compression compared to JPEG. 

WebP vs JPEG compression - Source: Google Developers
WebP vs JPEG compression – Source: Google Developers

Let’s check this statement with our JPEG image weighing 3.7MB. After converting to WebP, the image kept the same quality, but the file size dropped to 1.3 MB. 

Smaller file size with WebP + preserved quality - Source: WP Rocket
Smaller file size with WebP + preserved quality – Source: WP Rocket

PNG vs. WebP 

PNGs are mostly used for web graphics without background, such as logos and illustrations, rather than high-quality photos. They usually take up more storage space than the other formats. WebP lossless images are, on average, 26% smaller than PNGs.

Let’s do another quick test and convert a PNG image to WebP. Our original file weighed 432 KB, and with a simple conversion to WebP, it shrank to 244 KB. 

PNG vs. WebP - Source: WP Rocket
PNG vs. WebP – Source: WP Rocket

JPEG vs. PNG vs. WebP

To summarize, if you want to improve the Lighthouse performance score of your WordPress site, opt for WebP. That’s how the three formats compared to each other: 

WebP vs. PNG vs. JPG - Source: WP Rocket
WebP vs. PNG vs. JPG – Source: WP Rocket

Which Browsers Support WebP?

In 2023, all the major browsers support WebP. For example, this modern format is natively supported in Google Chrome, Safari, Firefox, Edge, the Opera browser, and other tools.

Browser versions that support WebP in 2023 - Source: CanIuse
Browser versions that support WebP in 2023 – Source: CanIuse

Displaying WebP Images with Fallback for Older Browsers

Images are crucial to ensure a great user experience, so they should be displayed for every visitor, even the ones using older browser versions. If you want to play safe, you should enable a fallback to other traditional formats, such as PNG or JPEG. 

How to Add Fallback to WebP Images

  • You can add the <picture> tag for your image to implement fallback if your visitor uses an old version. Browsers supporting WebP will display “dog. webp” while the older browsers version that don’t support WebP will fall back to “dog.jpg” element. 
WebP fallback with the picture tag - Source: WP Rocket
WebP fallback with the picture tag – Source: WP Rocket
  • Using a WordPress plugin like Imagify that allows you to convert your images to WebP and use the <picture> tags to enable the fallback on WebP Images.
Adding Fallback automatically to WebP images - Source: Imagify
Adding Fallback automatically to WebP images – Source: Imagify

How to Create and Use WebP Images on WordPress

As of WordPress 5.8, the WebP format is fully supported by WordPress. Simply upload your images to your media library and include them in your content. 

4 Best Plugins To Create a WebP Image

There’s no longer any need to install a third-party extension to upload Web images to WordPress, but you’ll need a plugin to convert your existing images to WebP. Here are 4 WebP WordPress plugins you can use to convert images to WebP:

  1. Imagify – an easy-to-use image compression plugin that offers WebP conversion. It’s free for around 200 images a month.
  2. WebP Converter for Media – converts files in standard JPEG, PNG, and GIF formats to the WebP format.
  3. WebP Express – adds a line of code to serve WebP images to users.
  4. Shortpixel Image Optimizer – another image optimization plugin that converts JPEG, PNG, or GIF to WebP and AVIF.

How to Create a WebP Image on WordPress

The easiest way to create a WebP image on WordPress is to use a plugin like Imagify. All your images can be converted to WebP in one single click, along with bulk compression. 

  1. Upload your JPEG, PNG, PDF, or GIF to your WordPress library
  2. From your WordPress dashboard, go to Settings > Imagify > Optimization Tab
  3. Check the following boxes: Create WebP versions of images and Display images in WebP format on the site
Web Conversion from the WordPress dashboard - Source: Imagify
Web Conversion from the WordPress dashboard – Source: Imagify

Bonus: If you are not a WordPress user you can also use design software such as Photoshop, Lightroom, or Sketch and export your media directly to WebP: 

WebP export - Source: Sketch
WebP export – Source: Sketch

Give an Extra Boost to Image Optimization

Along with image compression and WebP conversion, lazy loading is an additional way to serve optimized images to your visitors and boost your page loading speed. Using a script like Lazy Load means the browser only loads images above the fold (in the user’s viewport). 

Lazy Loading on images that are not needed yet by the visitor - Source: WP Rocket
Lazy Loading on images that are not needed yet by the visitor – Source: WP Rocket

Additionally, in their performance report, PageSpeed Insights recommends to “defer offscreen images” which means applying lazy-loading: 

Google’s recommendation to use lazy loading to boost performance - Source: PageSpeed Insights
Google’s recommendation to use lazy loading to boost performance – Source: PageSpeed Insights

How to Apply Lazy Loading to Your WebP Images

The easiest way to apply the lazy loading script to your WebP images is to use a WordPress plugin like WP Rocket. To implement lazy loading, follow those two easy steps directly from the WordPress admin:

  • Go to Settings > WP Rocket > LazyLoad tab
  • Tick the boxes of your choice amongst images, CSS background images, iframes, and videos.
Lazy loading feature with WP Rocket - Source: WP Rocket
Lazy loading feature with WP Rocket – Source: WP Rocket
🏆 WP Rocket is the first plugin to offer lazy loading on CSS background images in one single click!

Finally, PageSpeed Insights can detect if WP Rocket is installed on your WordPress site and eventually recommends you enable the LazyLoad feature: 

WP Rocket and PageSpeed Insights - Source: PageSpeed Insights
WP Rocket and PageSpeed Insights – Source: PageSpeed Insights
🚀 Do you want to improve your overall web performance?WP Rocket is also one of the best WordPress cache plugins that optimizes your database, your code and improves your Core Web Vitals in a few clicks.

Wrapping Up

Serving your images with the WebP format on WordPress is an easy way to boost performance. This next-gen format helps improve your Core Web Vitals by serving smaller image file sizes to your visitors – without impacting the quality! 

Wrapping up: 3 good reasons to use WebP on WordPress - Source: WP Rocket and Google
Wrapping up: 3 good reasons to use WebP on WordPress – Source: WP Rocket and Google

WordPress and the major browsers now support WebP, so you don’t need to worry about compatibility. With a tool like Imagify or WebP Converter for Media, converting your images into WebP directly from the WordPress dashboard is easier than ever.  

If you are willing to go the extra mile to boost your performance and optimize your images even more (with lazy load for example), give WP Rocket a try. It applies 80% of the performance best practice upon its activation and no technical knowledge is required. Also, there is a 30-day money-back guarantee, so you don’t take any risks – except the one to see your website loading faster!


Latest Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat
Get WP Rocket Now