How to Use and Serve WebP Images in WordPress

1. Understanding WebP

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.

2. Checking Browser Compatibility

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.

3. Converting Images to WebP

You need to convert your existing images to WebP. Here are some methods:

• Online Converters: Websites like CloudConvert or Squoosh 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.

4. Uploading WebP Images to WordPress

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.

5. Serving WebP Images

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.

1. Install and activate WebP Express from the WordPress plugin repository.

2. Configure the settings (found under Settings > WebP Express).

3. Ensure that the plugin is set to serve WebP images when supported and falls back to original formats otherwise.

6. Testing and Verification

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.

• Online Tools: Use tools like WebPageTest to analyze your site and confirm WebP images are being served.

Manual Method with Nginx:

1. Configure Nginx to Serve WebP

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

2. Verify WebP Images are Being Served

To verify that WebP images are being served correctly, use the developer tools in your web browser:

1. Open your website in a browser like Chrome or Firefox.

2. Right-click on an image and select "Inspect" to open the developer tools.

3. In the "Network" tab, reload the page and look for image requests.

4. Check the "Type" or "Content-Type" of the images to ensure they are being served as image/webp.

3. Monitor Performance

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.

Conclusion:

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.