How to Use and Serve WebP Images in WordPress
PreviousHow to Check Your Domain's Expiration DateNextEmail security best practices for using SPF, DKIM, and DMARC
Last updated
Was this helpful?
Last updated
Was this helpful?
What is WebP?
WebP is an image format that supports both lossy and lossless compression, offering smaller file sizes compared to traditional formats like JPEG and PNG without sacrificing quality.
Benefits of Using WebP:
Smaller File Sizes: WebP images are often significantly smaller than their JPEG and PNG counterparts.
Improved Performance: Faster page load times and reduced bandwidth usage.
SEO Benefits: Faster sites can rank better in search engine results.
Before implementing WebP, ensure that the browsers your visitors use support this format. Most modern browsers like Chrome, Firefox, Edge, and Opera support WebP. Safari added support starting with version 14.
You need to convert your existing images to WebP. Here are some methods:
Online Converters: Websites like CloudConvert or allow you to convert images to WebP online.
Software Tools: Tools like Photoshop with the WebP plugin, GIMP with WebP plugin, or dedicated software like XnConvert.
Command Line Tools: Using cwebp from the WebP package provided by Google for batch conversions.
WordPress does not natively support WebP uploads as of now, so you’ll need a plugin:
Recommended Plugins:
Imagify: This plugin optimizes your images and supports WebP.
Smush: Another popular image optimization plugin that supports WebP.
EWWW Image Optimizer: Offers automatic WebP conversion and serving.
Once your images are converted and uploaded, you need to serve them properly. Here’s how:
Using a Plugin:
WebP Express: This plugin converts and serves images as WebP. It includes options for rewriting image URLs to serve WebP versions when supported.
Install and activate WebP Express from the WordPress plugin repository.
Configure the settings (found under Settings > WebP Express).
Ensure that the plugin is set to serve WebP images when supported and falls back to original formats otherwise.
After setting up WebP images, verify that they are served correctly:
Browser Inspection: Use developer tools (F12) in your browser to inspect the images and ensure they are in WebP format.
To configure Nginx to serve WebP images when supported by the client browser, follow these steps:
Step 1: Access Your Nginx Configuration File
The location of the Nginx configuration file may vary depending on your setup, but it is commonly found at /etc/nginx/nginx.conf or within a site-specific configuration file in the /etc/nginx/sites-enabled/ directory.
Step 2: Edit Your Nginx Configuration
Open your Nginx configuration file with a text editor. For example:
sudo nano /etc/nginx/sites-enabled/your-site.conf
Step 3: Add the WebP Serving Logic
Add the following configuration to your server block to check for WebP support and serve the WebP image if available:
server {
# Other server configurations...
# Add the following location block
location ~* ^/wp-content/uploads/.*\.(png|jpg|jpeg)$ {
add_header Vary Accept;
expires 365d;
try_files $uri$webp_extension $uri =404;
}
# This map checks for WebP support
map $http_accept $webp_extension {
default "";
"~*webp" ".webp";
}
# Add this header for correct content type
location ~* \.webp$ {
add_header Content-Type image/webp;
}
# Other server configurations...
}
This configuration checks if the client accepts WebP images. If so, it tries to serve the WebP version of the image. If the WebP image is not found, it falls back to the original format.
Step 4: Test Your Configuration
Before reloading Nginx, it’s crucial to test the configuration for any syntax errors:
sudo nginx -t
If the test is successful, reload Nginx to apply the changes:
sudo systemctl reload nginx
To verify that WebP images are being served correctly, use the developer tools in your web browser:
Open your website in a browser like Chrome or Firefox.
Right-click on an image and select "Inspect" to open the developer tools.
In the "Network" tab, reload the page and look for image requests.
Check the "Type" or "Content-Type" of the images to ensure they are being served as image/webp.
Use tools like Google PageSpeed Insights or GTmetrix to monitor your website's performance and ensure that serving WebP images is having the desired effect on load times.
By manually configuring Nginx to serve WebP images, you can significantly enhance your website's performance. This method ensures that WebP images are served to browsers that support them while falling back to the original image formats for those that do not. Always backup your configuration files before making changes and test thoroughly to ensure everything is working as expected.
Online Tools: Use tools like to analyze your site and confirm WebP images are being served.