How to display WebP images on WordPress?

JPEG, PNG, SVG, GIF: these traditional image formats should surely ring a bell.

These are the most commonly used on websites. Behind them, a competitor is gaining increasing popularity.

It must be said that it has what it takes to be appealing. This image format helps speed up your page load times. by dramatically compressing your JPEG, PNG or GIF images.

Are you familiar with the WebP format? By the end of this article, it will hold no secrets for you. As a bonus, you'll learn how to use and display WebP images on WordPress, with and without a plugin. 

What is the WebP format?

WebP: a lightweight format to speed up the web

WebP is an image format designed by Google that aims to create "Smaller, richer images" to speed up the web, the search engine detailsThanks to WebP, your images have a higher degree of compression (up to 30% on average compared to the 

JPG), without loss of quality.

In addition to trying to make the web faster, the WebP format, launched in 2010, also aims to replace more traditional image formats such as: 

• JPEG (or JPEG 2000), a standard and universal format;
• PNG, which handles transparency;
• GIFs are used to create animated images; 
• SVG, a vector drawing format.

Like WordPress, WebP is open source Its source code is open and modifiable. As Google indicates in its FAQ dedicated to WebP, "Anyone can use the format and suggest improvements.".

What are the characteristics of the WebP format? 

If we look a little closer at the technical side, here are some key characteristics of WebP in detail.

First, WebP allows image compression with (lossy) and without loss of quality (lossless).

"Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos, Google explains. Predictive code uses the values ​​of neighboring pixel blocks to predict the values ​​of a block, then encodes only the difference.

En lossyReducing file size is the priority, but the loss of quality will be greater than in lossless (which will retain a slightly larger image file).

In the context of lossless compression (lossless), "Lossless WebP compression uses fragments of previously viewed images to reconstruct exactly new pixels."Google specifies.

Furthermore, WebP is also interesting because it is capable of:

• take charge of transparencyThe size of a PNG file converted to lossy WebP is, for example, 3 times smaller;
• managing animated images, as the GIF format does, for example. "Animated GIFs converted to lossy WebP are 64% smaller, while lossless WebP files are 19% smaller."explains Google.

Why use WebP?

Although it is still much less used on websites than more classic formats like JPEG or PNG, WebP is gaining popularity and experiencing significant growth in recent months.

According to figures provided by the organization W3Techs, its use doubled between December 2021 and December 2022. :

More and more webmasters are attracted to the number one advantage of this format: thanks to the compression gain it allows on your images, your site's pages load faster.

In this regard, the results of in-house studies conducted by Google are telling:

• WebP images are 25% to 34% lighter than those in JPG ;
• WebP allows a compression rate up to 23% higher than the PNG format.

The compression gain is significant, all without any noticeable difference to the human eye. A WebP image has exactly the same visual appearance as a JPEG or PNG image.Look:

With smaller images, your WordPress website pages will load faster. This is an aspect to take very seriously. 

Images are the most commonly used type of content on a web page, ahead of JavaScript, CSS and HTML files. In some cases, they can even represent almost half the total size of a web page!

It is therefore essential to optimize them, which WebP allows. Thanks to it:

• you take care of the user experienceYour visitors want to navigate pages quickly, otherwise they'll leave your site quickly and increase your bounce rate, which sends a bad signal to Google. On average Your conversion rate has decreased by 4,42% for every second of additional loading time;
• you are trying to conform (in part) to Essential Web Signals (Core Web Vitals), taken into account by Google's algorithm. Core Web Vitals focus particularly on your page load speed. If it's very slow, this can impact your page rankings in Google search results.

To find out your page load speed and get suggestions for improvement, use a performance measurement tool like Google Page Speed ​​Insights, Pingdom Tools ou WebPageTest.

Which browsers support the WebP format?

If WebP is gaining more and more support, it is also because its support by the main browsers on the market has greatly improved over time.

Initially, for example, it wasn't supported by Safari, Apple's browser, which may have hindered its adoption. At the time of writing, this is no longer the case. 

Currently, the latest versions of most browsers support WebP. This is the case, for example, with:

• Google Chrome (computer and mobile device: smartphone or tablet);
• Firefox (computer and mobile);
• Opera (computer and mobile); 
• Microsoft Edge;
• Safari. 

According to the Can I Use websitewhich provides up-to-date information on web technology support across browsers, WebP is supported by 97% of browsers used by internet users. :

There are still a few details you should know:

• Internet Explorer does not support WebP ;
• Safari fully supports WebP starting with version 16.0 on desktop computersFor versions 14 to 15.6, support is partial: the user must have macOS Big Sur or higher installed on their machine.

Does WordPress natively support the WebP format?

You have just seen WebP support on web browsers, but what about WebP adoption on WordPress?

Since July 2021 and the release of version 5.8 of WordPress, the most used CMS (Content Management System) across the planet supports WebP.

In practical terms, this means that you can Download and upload WebP images from your WordPress Media Libraryprovided they have been converted to this format beforehand (your serveran accommodation (It should also support WebP, by the way.)

For the time being, WordPress does not yet allow generating WebP images by default. as soon as the user uploads JPEG images. 

This feature was supposed to be integrated by default into the WordPress Core with the release of WP 6.1 in November 2022. But its development was paused at the last minute.
The main developers of the CMS wanted the option not to be active by default, which was not the case in its current state. 

However, by the time you read this article, support for the WebP format may be integrated into WordPress Core.

If this is not already the case, you will need to convert your images to WebP format in order to use them on WordPress. 

Discover now how to do it with and without a plugin, and the differences between these two types of use. 

How to use WebP images on WordPress without a plugin?

To manually convert your images to WebP on WordPress, you have two main options. 

Option #1: Use a command-line utility

Option #1 is the most technical. As Google explains, it is first possible to use the WebP command-line utility to convert your personal image files to WebP format.

This implies that you are comfortable with development and writing command lines.

The advantage is that you can convert all your JPEG files in bulk, using a single line of text. The procedure differs depending on the operating system you are using (Windows, Linux/macOS):

For your information, Google provides more details on the procedure in its documentation.

Option #2: Use a dedicated tool/software

More affordable for the novice or intermediate user, the second solution involves using software or an online tool capable of converting your image files to WebP.

Here are some WebP file converters that might help you:

• WebPonize, a free macOS application for converting to WebP format. Its Windows equivalent is WebPconv ;
• Convertio (free) ;
• EZGIF (free) ;
• The extension Chrome Save image as Type (free). It allows you to save an image in WebP format;
• Softwares Adobe Photoshop (paid) and Gimp (free) allow you to export images in WebP format for WordPress;
• Online Converter (free).

Choose one of the services offered above, then convert the image of your choice to WebP format. The file will then have the .webp extension (e.g., myimage.webp).

Next, go to your WordPress admin interface to upload the converted image to your Media Library. To do this, go to the Media > Add New menu.

Upload your image by dragging and dropping it into the designated area:

Your image is now in your Media Library. You can use it in any type of custom content (article, page, etc.). Your user's browser will automatically display it in WebP format, if it supports it.

If you use the Gutenberg editor on WordPressYou can also drag and drop an image directly into the content of your choice, for example, a blog post you're writing. WordPress will automatically add the image to your media library. A great way to save time!

While this method is functional and effective, it has two major problems:

• It "forces" you to leave your WordPress interface to convert your filesYou have to juggle multiple tabs, which slows down the editing process;
• It does not allow you to convert images already present on your site to WebP.. 

With an extension, these kinds of minor inconveniences are a thing of the past. The question remains: which one to use, and how to proceed? See all that below.

How to display WebP images on your site using a plugin?

A WebP extension for WordPress is capable of converting to WebP all new images that you upload, as well as those already present in your Media Library.

For you, nothing changes: you continue to add your images on the fly, in the format of your choice, and the WebP plugin on WordPress takes care of the conversion automatically.

If your visitor's browser supports WebP, the WebP version of your image will be displayed. Otherwise, the original image format (JPEG, PNG, GIF) will be used.

The official WordPress plugin directory offers around ten extensions to get you started. Among those with over 100,000 active installations, you'll find, for example: 

• EWWW Image Optimizer;
• Smush;
• Imagify;
• ShortPixel Image Optimizer;
• Converter for Media;
• WebP Express. 

So, which one should you choose? Smush? ShortPixel? Imagify? For the purposes of this test, we will present the configuration of three of them:

• Imagify, because it is a solution made in France;
• EWWW Image Optimizer, which is the most popular along with Smush (1 million+ active installations);
• Converter for Media, one of the highest rated (4,9 out of 5 stars).

The dedicated team in charge of the Performance on WordPress also offers an extension, PerformanceLabto improve your site's performance. It notably offers a module to create a WebP version of each new JPEG image you upload.

Option 1: Convert WebP images on WordPress using the Imagify plugin

Developed and maintained by the WP Media team, which also offers the WP Rocket caching plugin, Imagify is an extension that allows you to optimize your images by compressing them, without loss of quality.

Among its features, it also offers an option to convert your files to next-generation formats (next gen formats) like WebP on WordPress. 

To achieve this, start by installing and then activating the plugin via the Extensions > Add menu.

After registering your retrieved API key on your Imagify account (it all takes very quick and only a few clicks), configure your optimization settings for the WebP format on WordPress.

Go to Settings > Optimization. In the section called "Optimization, WebP Format", check the following boxes:

• "Create WebP versions of your images" so that Imagify can take care of it automatically for you;
• "Display images in WebP format on the website" to tell the plugin to offer WebP versions to web browsers that support them. By default, Imagify will replace your tags by tags This is his recommended solution.
  If this causes a bug on your site, instead select the "Use rewrite rules" radio button in your .htaccess file.

Remember to save your settings. To do this, click the "Save changes" button at the bottom of the page. 

Subsequently, you can also optimize in bulk (bulk optimization) all the images on your site by going to Media > Bulk Optimization. In this case, your WebP settings in WordPress will be applied to your entire Media Library with a single click.

Imagify is a freemium WordPress plugin. Its free version is limited to optimizing 20 MB per month, or approximately 200 images. Premium plans then range from €4,99/month (for 500 MB) to $9,99/month (unlimited).

Option 2: The EWWW Image Optimizer extension

EWWW Image Optimizer is one of the most popular image optimization plugins in the official WordPress directory. Like Imagify, it compresses and optimizes the size of your images to help make your pages load faster.

It does not impose any size limit for processing your images and has the unique feature of compressing your images on your server (no API key required here).

After activating the extension, go to the "General" tab of the settings menu (in Settings > EWWW Image Optimizer). 

In the "WebP Conversion" option, check the corresponding box to convert your images to this format:

From now on, every time you upload a new image to your WordPress siteEWWW Image Optimizer will generate it in WebP format.

If you want to convert all the files in your Media Library in bulk, go to Media > Bulk Optimization. Check the "WebP Only" box and you're done:

Is EWWW Image Optimizer not to your liking, particularly due to its interface? Try the free version of ShortPixel or Smush, for example.

Option 3: Display WebP images on WordPress using Converter for Media

Unlike Imagify and EWWW Image Optimizer, which allow you to optimize the size of your images (WebP is one option among others), Media Converter is specifically dedicated to a precise action: Replace your standard image files (JPG, PNG, GIF) with their WebP format versions.on WordPress.

After activating this WebP extension for WordPress, WebP conversion is active by default.

However, you can fine-tune your settings via two tabs, accessible in Settings > Converter for Media:

• “General Settings” (General Settings) allows you, for example, to choose the compression type (ranging from lossy to lossless). You can also select the directories in which the files located there will be converted to WebP (e.g., Downloads / Plugins / Themes).
• “Advanced Settings” (Advanced Settings) gives you control over which files to convert to WebP on your WordPress, the image loading method, and additional functions (e.g., automatic deletion of files in output formats larger than the original).

In its Pro version, WebP Converter for Media also offers conversion to AVIF formatThis format, which emerged in 2019, offers even higher compression levels than WebP. However, it is currently not widely supported by most software, including web browsers.

How can you verify that your images are correctly converted to WebP format?

In principle, regardless of the plugin you choose, your images will be converted to WebP format. To verify this, perform a simple operation on your screen. 

After adding an image to a blog post or a page describing your services, open it in a new browser tab by right-clicking on it:

If its extension ends with webp in your search bar, everything worked:

WebP and WordPress: a summary

Using the WebP format on WordPress is an excellent way to compress your images without any noticeable loss of quality for the user. It also improves page load speed while enhancing the user experience. 

With web browsers gaining increasing support, the WebP format could even make a native appearance in the WordPress core during the release of one of its next major versions.

Until such a development occurs, using a plugin is the simplest and fastest way to convert your images to WebP. 

You can either: 

• use an all-in-one plugin like ImagifyThis will help you both to enable the WebP format and to optimize the file size and weight of your images. If this plugin doesn't meet your needs, give a competitor like EWWW, ShortPixel, or Smush a try, to name just a few;
• opt for a WebP-specific extension on WordPress such as Converter for Media.

If, despite the advice and explanations presented in this article, you still need assistance implementing the WebP format on WordPress, The WP Maintenance team of experts is at your service.. 

We are available 7 days a week to provide you with tailored support. Contact us for more information.