Would you like to learn how to use WebP files in WordPress?
WebP is a file format specifically for images that offers lossless and lossy compression. This makes WebP ideal for use in web applications, where image quality can be reduced without impacting the overall user experience.
Large image files often cause websites to load slowly. By learning how to optimize your images, you can increase your website speed and improve your ranking in search results. Site speed is an important factor for ranking high in searches, so it’s worth taking the time to learn how to optimize your images.
If you think heavy images are slowing down your WordPress website, try using WebP images instead of regular PNG or JPG files. WebP images can load faster than other image formats, helping your website reach that magical two-second threshold.
WebP Images is a modern image format introduced and recommended by Google to improve loading speeds . In this guide, we will show you how to use them in WordPress.
Page loading speed has always been something Google and other search engines care about, but now, more than ever, you can’t have a slow-loading website.
First, slow-loading websites have been proven to drive users away from your website (especially for mobile users).
More importantly, Google’s Page Experience algorithm is set to be updated in June 2022. When it does, it will send very little traffic to slow-loading websites.
Images usually make up only a small part of the content on most web pages. However, they make up the lion’s share of the file size. Therefore, if you are trying to increase the loading speed of your website, you need to pay attention to your images.
So how exactly do WebP files help?
WebP files are a particularly lightweight image format and can reduce file sizes by up to 25-34% compared to other file formats such as PNG and JPG.
To help you understand what makes WebP images so special, we’ll do a detailed comparison of PNG and JPG images versus WebP images.
Image files are either lossless or lossy when compressed .
Lossless compression produces images that lose little or no quality in comparison to lossy images. They can also be compressed and returned to their original state.
The reason this is possible is because compression for lossless images only works by removing the irrelevant bits of data encoded into the images. PNG files are usually lossless files.
Lossy images are fundamentally replaced and have essential bits of information that are permanently stripped. This results in smaller file sizes than lossless images, but there is a noticeable decrease in quality when you try to zoom in on them.
A good example of lossy images are JPG/JPEG files.
Then there are WebP images.
WebP images are a great option to have because they can be subject to lossy or lossless compression. In both cases they provide superior compression, but with no proportional loss in quality compared to PNG and JPG files.
A Google study showed that lossless WebP images can be up to 26% smaller than compressed PNG files. Lossy WebP images usually come out 25-34% smaller than JPG files.
Considering that these huge gains have been achieved without sacrificing image quality, it makes sense to use WebP images wherever possible.
Before we move on to showing you how to use WebP images, there are a few more things you should know about them.
Some Pros and Cons of WebP Files
As we mentioned earlier, WebP files tend to be much lighter and therefore load faster than JPG or PNG files.
For an average website with few images, the increase in load times will be marginal. But these effects multiply on image-heavy websites like e-commerce stores.
WebP images have several challenges. We’re going to give you some simple solutions, but you need to keep them in mind before you start.
First, WebP files are not universally supported by all browsers.
At 91% penetration of the scanner market, it’s not too much of an issue. Most major browsers such as Chrome, Firefox, Edge, and Opera provide default support for WebP images.
Other browsers like Safari don’t do this.
That doesn’t mean you have to choose between a faster website or serving unattractive content to readers using unsupported browsers.
All you have to do is preserve both the PNG/JPG and WebP versions of your images and serve different versions to different groups of users depending on what browser they are using.
For example, using a WordPress plugin, your website can show the WebP version of an image to browsers that support them, while automatically showing PNG or JPG versions of the same image to those that don’t.
The second disadvantage of using WebP is that WordPress does not support WebP files by default.
As you will see in a moment, there are several ways to circumvent this.
How to Add WebP Images in WordPress – 3 Methods
There are several different methods of using WebP images in WordPress. No method is better than the other, so you can choose the one that suits you best.
Method 1: Use a CDN
Content Delivery Networks (CDNs) are an efficient way to use WebP images in WordPress. CDNs are a network of servers that help redistribute the load of serving content from your website’s servers.
In general, if you use a CDN, it will cache your website content and serve it to users faster and more efficiently.
A CDN can easily be used to convert your PNG/JPG files to WebP files and serve them to audiences selected by browser type.
Some popular CDNs to use include Max CDN, Sucuri, Stackpath, Cloudflare, and KeyCDN.
Method 2: Use an Image Optimization Plugin
WordPress doesn’t allow you to upload WebP images, but you don’t have to. Actually, we think it’s better to upload images in PNG/JPG format first and then convert them to WebP.
This is because not all browsers currently support WebP images.
For this to work, the same images must be available in PNG/JPG format for viewing in browsers that do not support WebP files.
There are plugins that will allow you to achieve this quite easily.
Here are a few popular plugins you might consider using:
1. Imagify
Imagify is a free image optimization plugin and one we recommend for converting your images to WebP.
While Imagify is free to start with, it has a limit on how much you can optimize. Currently, users can use up to 20 MB of optimization per month for free. To get started, first install and activate the plugin from the WordPress repository.
You will be asked to create an account (all you have to do is provide your email), then an API key will be sent to you. Enter the API and continue configuring the plugin.
By default, most of the options you need are already set for you. However, you have to remember to enable the option to view WebP images.
You will see that the plugin has two ways to do this. First, by allowing you to create rewrite rules, and second, using <picture> instead of <img> tags.
In most cases, the second method is preferred, but this will not work in all themes. Imagify is free, simple to use, and effective, making it a plugin we recommend.
However, read on to see some alternative image optimization plugins as well as other ways to get the job done.
2. Smush
Smush is an all-purpose image optimization plugin for WordPress. You can use Smush to compress PNG and JPG files or convert them to WebP files.
Smush has loads of other useful features like slow loading and 45-point image CDN, all of which help increase your website speed.
While most of these great features are available for free, WebP conversion is only available in the Pro version. Depending on how many websites you’re working with, Smush Pro packages are priced at $6, $14, and $29 per month, respectively.
3. Optimole
Optimole is an image compression plugin that offers WebP conversion and the ability to serve them dynamically using Amazon CloudFront .
In addition, the plugin automatically resizes images to fit the screen, providing an optimal viewing experience for every visitor to your website.
User experience is an important part of Google Web Vitals, so this is a great feature to take advantage of.
You can start with Optimole’s free plan, which will allow you to serve up to 5,000 visitors per month, or opt for a paid plan that will allow up to 25,000 visitors per month.
Install and activate the plugin to use the free plan. You will be asked to create an account to get an API key.
After you enter your API key, the rest of the process is done for you by default. Optimole will automatically optimize your images and provide default WebP support along with other image optimization best practices.
4. ShortPixel
ShortPixel is a popular image conversion and optimization plugin. Like the other plugins on this list, you can set up ShortPixel to optimize or convert your WebP images.
You can also serve PNG/JPG versions of your WebP files to Safari users and other unsupported browsers. ShortPixel supports conversion to WebP images in both lossy and lossless formats and offers other benefits such as batch optimizer.
One of the highlights of ShortPixel is its unique glossy file format. Brilliant images are designed to provide a compromise between the quality depreciation of lossy image files and the smaller file size of lossless images.
To start using ShortPixel, download and activate the plugin and create an account and get an API key.
You won’t need to take much action after this point as most of the options are set for you. However, to enable WebP conversions, you need to go to the advanced tab and check the option to allow WebP conversion.
WebP conversion costs one credit per conversion. ShortPixel offers 100 free credits when you open an account with another 100 credits per month. If you use them, you can buy more.
Method 3: Manually Add WebP Images to WordPress
You can use a plugin or CDN or a combination of both to get the job done. The third option is to avoid both methods and manually upload your WebP images to WordPress.
Here are the steps to take:
Convert Your Images to WebP
You will need to convert your images to WebP format before uploading them to WordPress. This is usually easy to do and can be done in a variety of ways.
1. Use Online Image Converter
The first method is to use an online image converter. There are quite a few of these and not much that sets them apart in terms of quality.
One of the more popular is Online-Convert.com .
If you are just creating your website, you can easily convert your images first and then upload them. But what if you already have a fully built website or have already filled your website with images?
To overcome this, you can use a plugin that offers batch conversion. If you want to do this manually, you’ll have to get your hands dirty by going into the engine room and writing some code!
We’ll walk you through this process very briefly, but first, there’s another method to convert your images to WebP format.
2. Use an Adobe Photoshop Plugin
If you use Adobe Photoshop to create or edit images , you may want to save them in WebP format from within the app.
Although this is not possible by default, you can do this by installing a Photoshop image conversion plugin .
Now that you’ve successfully converted your images to WebP format, it’s time for the real heavy lifting.
How to Successfully Upload WebP Images to WordPress Manually?
There are different ways to do this. If you’re not familiar with using Secure File Transfer Protocol (SFTP), you can simply upload images directly into your downloads folder, without having to go through the media library.
You can also write some code in the theme of your WordPress website. Request:
- In the backend of your WordPress installation, go to Appearance > WordPress editor .
- Open the file named “functions.php ” and paste the following code at the bottom of the page:
//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');So much! You can go ahead and upload your WebP images without any hassle.
If you prefer to avoid working in the WordPress editor at all costs, you can achieve the same effect by installing a plugin called Code Snippets.
If you’re going to use a plugin, it might be best to just use a dedicated image compression plugin and avoid the manual approach altogether!
Now you know what WebP images are and how to use them to speed up your WordPress website. Your next step will be to try any of the methods we’ve introduced to you.
Here’s a final tip: To fully optimize your website, you should start by using a fast, lightweight WordPress theme.
If you are really concerned about Website Speed, give it a try!
Are you using WebP images? Do they make a difference in your page load speed? Is there anything you want to share with new users of WebP? Share your thoughts with us!
