JPEG, PNG, SVG, GIF: these traditional image formats probably sound familiar to you.
They are the most widely used on websites. Behind them, a competitor is becoming increasingly popular.
It must be said that it has plenty to offer. This image format helps speed up your pages’ loading time by dramatically compressing your JPEG, PNG or GIF images.
The WebP format—are you familiar with it? By the end of this article, it will no longer hold any secrets for you. As a bonus, you’ll know 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 explains. Thanks to WebP, your images have a higher compression rate (up to 30% on average compared to
JPG), with no 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;
- GIF, for creating animated images;
- SVG, a vector drawing format.
Like WordPress, WebP is open source: its source code is open and can be modified. As Google states in its FAQ dedicated to WebP, “anyone can use the format and suggest improvements”.
What are the characteristics of the WebP format?
If we take a closer look at the technical side, here are some of WebP’s key characteristics in detail.
First of all, WebP enables image compression both with quality loss (lossy) and without quality loss (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 coding uses the values of neighboring blocks of pixels to predict the values in a block, and then encodes only the difference.”
In lossy mode, reducing the file size takes priority, but the loss of quality will be greater than in lossless mode (which will keep the image file slightly larger).
In the case of lossless compression (lossless), “lossless WebP compression uses already seen image fragments to exactly reconstruct new pixels”, Google specifies.
WebP is also interesting because it is capable of:
- supporting transparency. The size of a PNG file converted to lossy WebP is, for example, 3 times smaller;
- manage 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”, Google explains.
Why use WebP?
Even though it is still used much less on websites than more traditional formats such as JPEG or PNG, WebP is gaining popularity and has seen significant growth in recent months.
According to figures provided by the organization W3Techs, its usage, for example, doubled between December 2021 and December 2022:
More and more webmasters are being won over by this format’s number one advantage: thanks to the compression gains it provides for 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 JPG images;
- WebP provides a compression rate up to 23% higher than the PNG format.
The compression gain is significant, all with no noticeable difference to the human eye. A WebP image looks exactly the same visually as a JPEG or PNG image, take a look:
With lighter images, the pages of your WordPress website will load faster. This is something 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 account for nearly half of the total weight of a web page!
It is therefore essential to optimize them, which WebP makes possible. Thanks to it:
- you improve the user experience. Your visitors want to browse fast pages; otherwise, they may quickly leave your site and increase its bounce rate, which remains a bad signal sent to Google. On average, your conversion rate decreases by 4.42% with each additional second of loading time;
- you try to comply (in part) with the Core Web Vitals (Core Web Vitals), which are taken into account by Google’s algorithm. Core Web Vitals focus in particular on how quickly your pages load. If they are very slow, this can affect the ranking of your pages on Google’s search results pages.
To find out how quickly your pages load and get suggestions for improvement, use a performance measurement tool such as Google Page Speed Insights, Pingdom Tools or WebPageTest.
Which browsers support the WebP format?
If WebP is gaining more and more support, it is also because support for it by the main browsers on the market has greatly improved over time.
Initially, for example, it was not supported by Safari, Apple’s browser, which may have slowed its expansion. At the time of writing, that is no longer the case.
Currently, the latest versions of most browsers support WebP. This is the case, for example, with :
- Google Chrome (desktop and mobile device: smartphone or tablet);
- Firefox (desktop and mobile);
- Opera (desktop and mobile);
- Microsoft Edge;
- Safari.
According to the Can I Use website, which provides up-to-date information on browser support for web technologies, WebP is supported by 97% of the 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. For versions 14 to 15.6, support is partial: the user must have macOS Big Sur or later installed on their machine.
Does WordPress natively support the WebP format?
You have just seen WebP support in web browsers, but what about WebP adoption in WordPress?
Since July 2021 and the release of WordPress version 5.8, the most widely used CMS (Content Management System) across the globe has supported WebP.
In practical terms, this means you can upload and add WebP images from your WordPress Media Library, provided you have converted them to this format beforehand (your hosting server must also support WebP, by the way)
For the time being, WordPress still does not generate WebP images by default when the user uploads JPEG images.
This feature was supposed to be integrated by default into WordPress Core with the release of WP 6.1 in November 2022. But its development was put on hold at the last moment.
The main developers of the CMS wanted the option not to be enabled by default, which was not the case as it stood.
However, by the time you read this article, support for the WebP format may have been integrated into WordPress Core.
If you haven’t already done so, you will need to convert your images to WebP format so you can use them on WordPress.
Find out now how to do this 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, you can first use the WebP command-line utility to convert your personal image files to WebP format.
This means you need to be comfortable with development and writing command lines.
The advantage is that you can convert all your JPEG files in bulk with a single line of text. The procedure differs depending on the operating system you use (Windows, Linux/macOS):
For your information, Google provides more information on the steps to follow in its documentation.
Option No. 2: Use a dedicated tool/software
More accessible for beginners or intermediate users, the second solution is to use software or an online tool capable of converting your image files to WebP.
Here are some WebP file converters that may help you:
- WebPonize, a free macOS application for converting to WebP format. Its Windows equivalent is WebPconv;
- Convertio (free);
- EZGIF (free);
- The Chrome Save image as Type extension (free). It allows you to save an image as WebP;
- The software programs 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).
Then go to your WordPress admin interface to upload the converted image to your Media Library. To do this, go to the Media > Add menu.
Upload your image by dragging and dropping it into the area provided for this purpose:
Your image is now in your Media Library. You can use it in any type of custom content (post, page, etc.). Your user’s browser will handle displaying it in WebP format on its own, if it supports it.
If you use the Gutenberg editor on WordPress, you can also drag and drop an image directly into the content of your choice, for example a blog post you are writing. WordPress will automatically add the image in question to your media library. A great way to save a little time!
While this method is functional and effective, it has two major drawbacks:
- It “forces” you to leave your WordPress interface to convert your files. You have to juggle several tabs, which slows down the editing process;
- It does not allow you to convert images already on your site to WebP.
With a plugin, these kinds of minor inconveniences are a thing of the past. The question remains which one to use, and how to proceed. See all of this just below.
How to display WebP images on your site with a plugin?
A WebP plugin for WordPress can convert all the new images you upload to WebP, as well as those already in your Media Library.
For you, nothing changes: you continue adding your images on the fly, in the format of your choice, and the WebP plugin on WordPress handles 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 plugins to help you take action. Among those with more than 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’ll show you how to configure three of them:
- Imagify, because it is a made-in-France solution;
- 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 stars out of 5).
The dedicated team in charge of Performance on WordPress also offers a plugin, Performance Lab, to improve your site’s performance. In particular, it offers a module to create a WebP version of each new JPEG image you upload.
Option 1: Convert WebP images on WordPress with the Imagify plugin
Developed and maintained by the WP Media team, which also offers the WP Rocket cache plugin, Imagify is a plugin that lets you optimize your images by compressing them without any loss of quality.
Among its features, it also offers an option to convert your files to next-generation formats (next gen formats) such as WebP on WordPress.
To do this, start by installing and then activating the plugin via the Plugins > Add New menu.
After registering your API key retrieved from your Imagify account (everything is done very quickly in just a few clicks), configure your optimization settings for the WebP format on WordPress.
Go to Settings > Optimization. In the box called “Optimization, WebP Format,” check the following boxes:
- “Create WebP versions of your images” so that Imagify handles this automatically for you;
- “Display images in WebP format on the site” to tell the plugin that it should serve WebP versions to web browsers that support them. By default, Imagify will replace your
tags with tags: this is its recommended solution.
If this causes a bug on your site, select the “Use rewrite rules” radio button instead, via your .htaccess file.
Remember to save your settings. To do this, click the “Save Changes” button at the bottom of the page.
After that, you can also bulk optimize (bulk optimization) all the images on your site by going to Media > Bulk Optimization. In this case, your settings for WebP on WordPress will apply to your entire Media Library in one click.
Imagify is a freemium WordPress plugin. Its free version is limited to optimizing 20 MB per month, or around 200 images. Premium plans then range from €4.99/month (for 500 MB) to $9.99/month (unlimited).
Option 2: The EWWW Image Optimizer plugin
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 you make your pages load faster.
It does not impose any size limit for processing your images and has the distinctive feature of compressing your images on your server (no API key needed here).
After activating the plugin, go to the “General” tab in the settings menu (under Settings > EWWW Image Optimizer).
Under 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 site, EWWW Image Optimizer will generate it in WebP format.
If you want to bulk convert all the files in your Media Library, go to Media > Bulk Optimization. Check the “WebP only” box and you’re all set:
EWWW Image Optimizer isn’t right for you, especially in terms of its interface? Try the free version of ShortPixel or Smush, for example.
Option 3: Display WebP images on WordPress with Converter for Media
Unlike Imagify and EWWW Image Optimizer, which let you optimize the weight of your images (WebP is one option among others), Converter for Media is specifically dedicated to one precise action: replacing your standard image files (JPG, PNG, GIF) with their WebP version on WordPress.
After activating this WebP plugin for WordPress, WebP conversion is enabled by default.
However, you can fine-tune your settings via two tabs, accessible under Settings > Converter for Media:
- “General Settings” lets you choose the type of compression, for example (ranging from lossy to lossless). You can also select the directories in which the files they contain will be converted to WebP (e.g.: Uploads / Plugins / Themes).
- “Advanced Settings” gives you control over which files to convert to WebP on your WordPress site, the image loading mode, or additional features (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 the AVIF format. Created in 2019, this format offers even higher compression levels than WebP. However, for now, it is still poorly supported by most software, including web browsers.
How can you check that your images have been properly converted to WebP format?
In principle, whichever plugin you choose, your images will be converted to WebP format. To make sure, perform a quick and very simple check on your screen.
After adding an image to a blog post or a page presenting your services, open it in a new tab in your browser by right-clicking on it:
If its extension ends with webp in your address bar, everything has worked:
WebP and WordPress: the recap
Using the WebP format on WordPress is an excellent way to compress your images without any loss of quality visible to the visitor. It also improves the loading speed of your pages, while enhancing the user experience.
Increasingly well supported by web browsers, the WebP format could even make a native appearance in WordPress Core with the release of one of its next major versions.
Until such a change happens, 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 Imagify, which will help you both enable the WebP format and optimize the weight and file size of your images. If this plugin does not meet your needs, try a competitor like EWWW, ShortPixel, or Smush, to name just a few;
- choose a WordPress WebP-specific plugin like Converter for Media.
If, despite the advice and explanations presented in this article, you need support implementing the WebP format on WordPress, the team of experts at Maintenance WP is at your disposal.
We are available 7 days a week to provide you with tailored support. Contact us to learn more.
