How to Use WebP Images on WordPress: Everything You Need to Know

Are you wondering how to use the WebP format on WordPress? Do you also want to know more about it and how to convert your current images to WebP? Great! In our article, we’re going to answer all your questions and share with you a list of reliable plugins and tools you can use for WebP conversion. 

What’s WebP?

WebP is a next-generation format created by Google that supports superior lossless and lossy compression for your images on the web, including WordPress. This next-gen format reduces the file size of the image resulting in faster downloads and less data consumption when rendering the image to the user.

Just like PDF or JPEG, WebP has its own file extension – “your-file-name.WebP”. 

It’s important to mention that WebP works with transparent (alpha) backgrounds and supports animation, i.e., animated GIFs. 

📖 Read our dedicated guide that explains how to serve next-gen formats on your WordPress site.

Why Choosing WebP for Your Images on WordPress

The WebP format is an efficient way to compress images, meaning you get a smaller file size without compromising quality. When using WebP on WordPress, the image’s visual quality is not altered, and the file itself is much lighter. As a result, you get a faster loading site while keeping an optimal user experience. 

Converting images to WebP is part of the recommendations from the Lighthouse performance report on PageSpeed Insights:

WebP vs. JPEG vs. PNG File Sizes (With Data)

For that next section, I’ve run my own tests and converted a PNG and a JPEG image to WebP. The goal was to see how much data I could save and if the conversion to WebP impacted quality. Are you curious? Let’s discover the results!

WebP vs. JPEG

When doing my own conversion to WebP, this next-gen format made me save 70% on my original file size (JPEG), and both pictures look the same: 

On average, Google found out that the average WebP file size was 25%-34% smaller compared to the JPEG one:

WebP vs. PNG

Similarly, WebP lossless images are around 26% smaller than PNGs. In our example below, we saved 96% of the file size by converting our image to WebP: 

💡Key takeaways on WebP: 🚀 Performance: WebP made me save 70% on my PEG file size and 95% on my PNG one → My WordPress site is likely to load much faster when using WebP. ✨ UX: The image quality is not altered by compression → The user experience is preserved.

How WebP Images Work on WordPress

Since WordPress 5.8, you can use WebP images for your web project in the same way as JPEG, PNG, or GIF formats. The WebP format works out-of-the-box on WordPress; you don’t need to tweak special options to render them properly. 

How to Upload WebP Images in WordPress

To upload your WebP images in WordPress, simply go to your WordPress dashboard > Media > Add New and upload a new WebP image. You can also drag and drop them directly into the library. 

How to Check that WebP is Working on My WordPress Site

To check if WebP is enabled on the front end, you can add a WebP image to your page and inspect the elements using the Chrome Developers tools.

Another way to check if WebP works on your website is to save the image on your computer. All you have to do is a right click and then select “Save the image as”. The image that you are downloading should have the WebP extension. 

Can You Use WebP?

Yes, you totally can (and should) use WebP for your next WordPress development project. Serving your images in this next-gen format will boost performance and avoid a heavy page with unnecessarily large images. 

Which Web Browsers Support WebP Images?

All the major web browsers, such as Chrome, Edge, Safari, Firefox, and Opera, now support WebP images and will render them properly on the user’s screen. It’s similar on mobile, as you can see in the figure below from caniuse.com, only the older versions of Safari and Android browsers don’t support WebP.

💡What is “caniuse”? It’s a reliable platform that provides up-to-date browser support information for web technologies on desktop and mobile.

How to Enable WebP in WordPress 

WordPress automatically enables the WebP format, but it will not convert your images to WebP. If you upload an image in JPG, it will not be converted to WebP by WordPress. Thankfully, in our next section, we give you a list of useful tools and plugins to easily convert your files to WebP. 

Now that you have learned more about the importance of the WebP format and how it works on WordPress, let’s see how to use and convert your files to this next-gen format so they are ready to use in WordPress. 

How to Use WebP Images in WordPress

WordPress will not convert your JPEG or PNG files into WebP but will display them on the front end and serve them to the user. As a result, you can follow one of the following options to convert your file into WebP: 

#1 Use a design software – the do-it-yourself way – by converting images manually using software like Lightroom, Photoshop, or Photopea, and then you upload your own WebP images to the WordPress library. 

#2 Use an online platform – the online way – by using an online tool to convert your file to WebP (but most of the time, you have to upload them to the platform one by one). As an example, you have the following online tools that can help you:

•  Cloudconvert – which converts any type of image files online into WebP. 

• Ezgif.com – another free and fast online WebP to JPG converter tool.

#3 Use a WebP converter WordPress plugin – the easy way – that can “bulk” convert all your existing images into WebP directly from WordPress.

• Imagify – a powerful image optimization and WebP converter plugin that allows you to compress up to 20 MB of data per month for free. In a couple of clicks, you can convert all your PNG, JPEG, PDF, and GIF to WebP directly from Imagify’s admin.

What’s interesting with Imagify is that your images also get compressed in async bulk without altering the quality. For example, Imagify can optimize 95.94% of the file size, and the image can go from 1.90 MB down to 79.15 KB:

📖 We also have a dedicated tutorial that explains how to convert your images to WebP with Imagify.

• ShortPixel – another image optimizer that provides both lossy and lossless image compression for the most common image types (JPG, PNG, GIF, WebP, and AVIF), including PDF files.

• Convertor for media – another image optimization plugin that converts images to WebP and AVIF (that is also a next-gen format). 

Which WebP Converter Tool is Best For You? 

• Using an online converter or converting images with Photoshop can be time-consuming if you have dozens of images. The conversion process can take some time as you need to convert them and then upload them to the WordPress library. 

• If you are in a hurry and want a plugin that can do the heavy lifting, then a WordPress plugin like Imagify will do the trick. In one click, Imagify will convert all the existing images to WebP and the new ones you’ll add later. Another benefit of Imagify is the async bulk optimization, meaning that the image compression is done in the background; you can close the page, and Imagify will do the job nonetheless. And the handy thing is you don’t need to leave the WordPress admin to do the conversion, unlike the other online tools that involve several extra steps. 

We have summarized the two ways in our figure below to help you in your decision-making process:

📖 Interested in using a WebP converter WordPress plugin? Check our article, where we review 4 WebP plugins you can use for your next conversion project.

Wrapping Up

The performance of your WordPress site depends largely on the size and format of your images. Thanks to the WebP format, you can reduce your file size without altering the quality of your images! It’s a super easy way to optimize images and pass the PageSpeed performance audit. If you want to compress images even more and offer an amazing user experience, why don’t you try Imagify? It’s free, and the only risk you take is to shrink the size of your images and make your website load faster!