Images are often the primary cause of slow loading times on WordPress websites. If your pages take too long to display, visitors may leave before engaging with your content.
The good news is that using WebP images can resolve this issue. This advanced file format can reduce image sizes by up to 35% without sacrificing quality, significantly enhancing your site’s loading speed.
In this guide, we will demonstrate three different methods for implementing WebP images in WordPress.
What Is WebP?
WebP is a modern image format created by Google specifically for online use. Its standout feature is its advanced compression technology, allowing WebP images to be 25-35% smaller than JPEG and PNG files while preserving the same visual quality.
For context, if your current PNG image is 100KB, the equivalent image in WebP format would be approximately 65-75KB, with no noticeable difference in quality. This reduction in size leads to faster page loading times and an improved user experience.
The WebP format supports both lossy and lossless compression, as well as features like transparency and animation, making it a flexible alternative to various traditional formats.
You can explore image compression further in our guide on optimizing images for the web.
Browser Support: Is WebP Compatible with Your Website?
WebP format is widely supported, with over 95% of browsers globally compatible. Major browsers such as Chrome, Firefox, Safari (from iOS 14), and Edge fully support WebP images.
The remaining 5% includes primarily outdated browser versions that are quickly becoming obsolete.
Should You Implement WebP Images in Your WordPress Site?
For the majority of WordPress sites, the answer is a resounding yes. Utilizing WebP can greatly enhance your website’s speed and works seamlessly with other performance enhancements like caching plugins and CDNs.
Starting from WordPress 5.8, the platform includes native support for WebP, allowing you to upload and utilize WebP images directly without additional plugins. However, this basic support does not automatically convert your previously uploaded images or provide fallback options for older browsers.
For optimal results, we suggest using a specialized image optimization plugin. These plugins automatically convert your existing images to WebP format and deliver traditional JPEG or PNG versions to the small number of users with unsupported browsers.
WebP is especially advantageous for image-rich websites, such as photography blogs, e-commerce platforms, or portfolios, or if your WordPress blog is currently facing slow loading times due to large image files.
Learn how to effectively use WebP images in WordPress. We will present several methods so you can select the one that suits you best:
- Implementing WebP Images in WordPress Using EWWW Optimizer
- Implementing WebP Images in WordPress Using Imagify
- Implementing WebP Images in WordPress Using SG Optimizer
- Video Tutorial
- Common Questions About WebP Images
- Comprehensive Guides on Image Usage in WordPress
Step 1: Implementing WebP Images in WordPress Using EWWW Optimizer
EWWW Image Optimizer is a top-rated WordPress image compression plugin that enables you to optimize your images. It also supports WebP images and can automatically display them in compatible browsers. Check out our detailed review of the EWWW Image Optimizer for more information.
First, you need to install and activate the EWWW Image Optimizer plugin. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.
After activation, navigate to the Settings » EWWW Image Optimizer page to adjust the plugin settings. A setup wizard will appear, but you can click on the ‘I know what I am doing’ link to bypass it.
On the following screen, you will find various plugin settings.
Scroll down and check the box next to the ‘WebP Conversion’ option.
Click the ‘Save Changes’ button to apply your settings.
Scroll down to the WebP Conversion section, where the plugin will display some rewrite rules along with a red preview image.
Click the ‘Insert Rewrite Rules’ button, and the plugin will attempt to add these rewrite rules to your .htaccess file automatically.
If the plugin successfully adds the rules, the red preview image will change to green with the text ‘WebP’ displayed.
If the plugin fails to insert the rules, manually copy the rewrite rules from the plugin’s settings page and paste them at the bottom of your .htaccess file.
After completing this step, go back to the plugin’s settings page and click the ‘Save Changes’ button again. If the preview image turns green, you have successfully enabled WebP image delivery on your WordPress site.
As an alternative, you can select ‘JS WebP Rewriting’ or ‘Picture WebP Rewriting’ for your WebP delivery options. These alternatives are effective if the .htaccess method is incompatible with your server setup (such as when using a CDN).
Convert Your Existing Images to WebP Format in Bulk
The EWWW Image Optimizer makes it simple to convert your existing image files to WebP format. Start by navigating to the Media » Library section and switch to list view.
Next, click on the ‘Screen Options’ button and set the ‘Number of items per page’ to 999. If you have over 1000 images, the additional images will appear on the next page.
This allows you to easily select a large batch of images for bulk optimization. Then, click the Select All checkbox at the top to choose all images.
After that, open the ‘Bulk Actions’ dropdown menu and select the ‘Bulk Optimize’ option. Finally, click the ‘Apply’ button.
On the following screen, the plugin will offer you the choice to skip image compression and only convert them to WebP. You can select this option if your images are already optimized.
Next, click the ‘Scan for Unoptimized Images’ button to proceed. The plugin will display the number of images it has found, allowing you to click the Optimize button to continue.
Your images will be optimized, and the EWWW Optimizer will create WebP versions of your images.
Testing Your WebP Image Delivery
Once your images are optimized, you can visit a blog post that includes several images.
Hover over any image and right-click to open it in a new tab.
This action will display the image in a new browser tab.
Due to the special rewrite rules used by EWWW Image Optimizer, the URL in the address bar will still display the original file extension, such as .png or .jpg.
To verify that it is a WebP image, right-click on the image and select ‘Save image as…’. In the download dialog, you should see ‘WebP Image’ listed as the file type.
If the plugin fails to serve the WebP image, return to the plugin’s settings page. From there, you can adjust the WebP delivery option to either ‘JS WebP Rewriting’ or ‘WebP Rewriting’ methods.
Method 2: Utilizing WebP Images in WordPress with Imagify
Imagify is an image optimization plugin for WordPress developed by the creators of WP Rocket, the leading caching plugin for WordPress. It simplifies the process of optimizing and converting images to the WebP format. Check out our Imagify review for more information.
First, you need to install and activate the Imagify plugin. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.
After activation, navigate to the Settings » ImagifyVisit the settings page of the plugin. Click on the ‘Create a Free API Key’ button to proceed.
You will be prompted to enter a business email address. Check your inbox for an email that contains your API key. Copy this key and paste it into the plugin’s settings page, then click on the ‘Save Changes’ button.
Next, scroll down to the Optimization section. Here, check the boxes next to ‘Create webp versions of images’ and ‘Display images in webp format on the site’.
Below that, you can select one of two methods for delivering WebP images in WordPress. The first option is the .htaccess method, and the second option involves using a
The .htaccess method is quicker, but it won’t work if you are using a CDN service. The tag method (using
Choose the method that best suits your site. Afterward, click on the ‘Save & Go to Bulk Optimizer’ button at the bottom.
This will take you to the Media » Bulk Optimization page.
The plugin will begin optimizing all your WordPress images automatically in the background.
If you have many images, the optimization process may take some time. Don’t worry, you can close the page and return later, as this will not interrupt the image optimization.
How to Test Your WebP Images in WordPress
After the optimization is complete, visit a page or post with images. Hover over an image, right-click it, and select ‘Open image in new tab’.
This action will open the image in a new browser tab.
Since Imagify maintains the original URL structure, the .webp extension will not appear in the address bar. To save the image, right-click it and choose ‘Save image as…’. The file type in the save dialog should indicate ‘WebP Image’.
Method 3: Utilizing WebP Images in WordPress with SG Optimizer
This method is ideal for SiteGround users.
SiteGround is among the top WordPress hosting providers. They offer a complimentary SG Optimizer plugin, which helps enhance your WordPress site’s performance, including image optimization.
Begin by installing and activating the SG Optimizer plugin.
Once activated, the plugin will create a new menu item in your admin sidebar labeled ‘SG Optimizer’. Click on it to access the plugin’s settings page.
You can enable caching settings to utilize SiteGround’s integrated caching system.
Next, navigate to the Media Optimization tab and activate the ‘Generate WebP Copies of New Images’ feature.
Below this, you will find the option to ‘Bulk Generate WebP Files’.
By toggling this option, you will initiate the generation of WebP copies for all image files in your WordPress media library.
Once the process is complete, your WordPress site will begin serving WebP images.
Testing WebP Images with SG Optimizer
To verify if your website is delivering WebP images, open a page on your site that contains several images.
Then, right-click and select the Inspect tool. This will launch the developer console, where you should switch to the Network tab.
From there, click on the ‘Img’ filter tab and refresh the page (CTRL+R on Windows and Command+R on Mac). Check the ‘Type’ column in the inspector; you should see ‘webp’ listed as the type for your images.
Common Questions About WebP Images
Many readers are curious about transitioning to the WebP image format and its impact on website performance. Here are answers to some of the frequently asked questions regarding the use of WebP images in WordPress.
1. Do WebP images truly enhance SEO?
Absolutely, WebP images can greatly enhance your SEO rankings. Google views page speed as a crucial ranking factor, and using WebP format helps to decrease page load times.
By serving smaller image files, you can improve your Core Web Vitals scores, which contributes to a higher ranking for your WordPress site in search results.
2. What if a visitor’s browser does not support WebP?
While most modern browsers support WebP, a small number of older browsers do not.
If you utilize an optimization plugin like EWWW Image Optimizer or Imagify, the plugin will automatically identify the visitor’s browser. It will deliver the WebP version to compatible browsers and the original JPEG or PNG file to those that do not support WebP, ensuring all users can access your content.
3. Can I upload WebP images directly to WordPress without using a plugin?
Yes, WordPress version 5.8 and later allows you to upload WebP files directly to your media library, just like you would with JPEGs or PNGs. However, uploading files manually does not convert your existing media library.
To automatically convert your older images, you’ll need an image optimization plugin such as SG Optimizer or EWWW Image Optimizer.
Is WebP superior to JPEG or PNG?
In nearly all situations, WebP outperforms JPEG and PNG in terms of website performance. WebP images are usually 25% to 35% smaller than similar JPEG or PNG files while preserving the same visual quality. This reduction in file size conserves bandwidth and significantly speeds up page loading times for your visitors.
Will converting to WebP remove my original images?
Most image optimization plugins, including Imagify and EWWW Image Optimizer, do not remove your original images by default. They generate a WebP version of the image for visitors while keeping the original file on your server as a backup. This feature allows you to revert to the original format if you decide to discontinue using WebP.
Comprehensive Guides on Image Usage in WordPress
We hope this article has helped you understand how to utilize WebP images in WordPress. You might also find these additional guides helpful for managing images on your WordPress site:
- Step-by-Step Guide to Adding Images in WordPress
- How to Add Featured Images or Post Thumbnails in WordPress
- WebP vs. PNG vs. JPEG: Choosing the Best Image Format for WordPress
- How to Optimize Images for Web Performance While Maintaining Quality
- Comparison of the Best Image Compression Plugins for WordPress
- Essential Tools for Creating High-Quality Images for Your Blog Posts
- Top WordPress Plugins for Efficient Image Management (Updated)
- Understanding the Difference Between Image Alt Text and Image Title in WordPress
- Where WordPress Stores Images on Your Website
- A Simple Guide to Implementing Lazy Loading for Images in WordPress
If you enjoyed this article, consider subscribing to our YouTube Channel for WordPress tutorials. Connect with us on Twitter and Facebook as well.
