However, delivering images via WebP is not easy. It depends on your server's webserver, selected cdn, theme, caching plugins, etc.
This guide will help you deliver WebP images to WordPress in three ways.
What is WebP?
New Image Format for the Web
by Google
WebP is an image format (like png and jpg) developed by Google. WebP (.webp) images tend to be much smaller, which speeds up websites and uses less bandwidth.
Depending on the image, you can reduce the size from 25% to 70%.
JPEG, PNG, GIF, etc. have their pros and cons. The table below will give you an idea:
| JPG | GIF | PNG | SVG | |
| Vector | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Transparency | ❌ | ✅ | ✅ | ✅ |
| Animation | ❌ | ✅ | ✅ | ✅ |
| Lost | ✅ | ❌ | ❌ | ❌ |
WebP has almost all the features mentioned above! Then why can't we use WebP everywhere?
Why not use WebP everywhere?
As you can see, only 80% of devices only support WebP. Not only legacy browsers, Safari/iOS Safari still doesn't support WebP.
Why is it so difficult to serve WebP?
As you noticed, we deliver images according to the browser. If the browser does not support WebP, we must provide them with the original image (jpg/png/gif).
There are two main ways to serve WebP:
Using the image tag
We can usepicturetag to tell the browser that we have a WebP format. If the browser supports it, the regular/fallback image will be loaded.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>By different answer
In a different answer, as usual, you have one file. Exactly:
<img src="img.jpg" />One image URL supports delivery of jpg and webp files. This is what the server does.
Even though it is a .jpg file extension, if the browser supports WebP, then the response will be WebP. Also called "diverse response".
Image Tag vs Diverse Response
Each has its pros and cons. Here is a comparison table:
| image tag | Diverse response | |
|---|---|---|
| Works with background images | ❌ | ✅ |
| CDN friendly | ✅ | ✅ (just a few) |
| Server needs to be configured | ❌ | ✅ (nginx) |
| Works with lazy loading | ✅ | ✅ |
How to serve images in WebP in WordPress?
Method #1 - Use CDN only with fly WebP conversion
This is probably the simplest solution. Some CDN providers currently support on-the-fly image to WebP conversion along with image optimization.
Here are a few:
- BunnyCDN
- Cloudflare with Polish (Pro Plan)
- Cloudinary
- ShortPixel Adaptive Images (uses StackPath CDN)
- WP Compress
You can also save disk space using this method since you don't have to store both regular and converted WebP images.
BunnyCDN
BunnyCDN comes with the Bunny Optimizer, which can compress images and convert them to WebP on the fly.
Method #2 - Using Diverse Response + CDN
As described above, a "variety response" will have a single image URL that can serve both WebP and non-webp images depending on the requested browser.
We also need to choose the right CDN that supports WebP request headers as a cache key. Otherwise, once the WebP image is cached on the server, it will be delivered to browsers that don't support WebP.
Customizing Varied Response in WordPress
The easiest way to set up a rich response for WebP in WordPress is to use the WebP Express plugin. Just install the plugin and click "Save settings and force new .htaccess rules".
WebP Express will configure the WebP converter and overwrite the rules so that when it receives a request, it will convert the images to WebP on the fly, and if the browser does not support WebP, the default image will be delivered.
If you are in Nginx
WebP Express adds the necessary '.htaccess' rewrite rules, but only works on an Apache, LiteSpeed or OpenLiteSpeed server. If you are using Nginx you need to editnginx.configand add the following code:
# WebP Express rules# --------------------location ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Accept;expires 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Route requests for non-existing webps to the converterlocation ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (WebP Express rules ends here)The above code adds the required response headers (cache management also varies) and attempts to deliver WebP if it exists, otherwise redirect it to the converter (based on browser support)
CDN providers supporting Diverse Response
If your CDN provider does not support WebP as a caching key, WebP files will be delivered to browsers that do not support WebP. Similarly, there is a chance that non-webp images will be delivered to supported browsers.
BunnyCDN , KeyCDN , Google CDN and many other CDN providers support WebP as a cache key. Make sure you enable them in the settings.
VBunnyCDN :
VKeyCDN :
Are you using Cloudflare's free plan?
Unfortunately, Cloudflare's free plan does not support WebP as a cache key. Either use a CDN like BunnCDN or upgrade to their professional plan.
Set up a diverse response + CDN with popular hosting providers
Make sure WebP Express is installed.
- Kinsta or WP Engine - contact their support team to add the above Nginx configuration and include the WebP caching key in their CDN (KeyCDN).
- Cloudways - just install WebP Express and save the settings using .htacess. Because Cloudways uses a hybrid Apache + Nginx approach, it works out of the box.
- SiteGound - Contact support to add the Nginx configuration. Use a supported CDN as above.
- LiteSpeed / OpenLiteSpeed / Apache server - just install WebP Express and save settings with '.htacess'. Also use a supported CDN as above.
- Custom VPS with Nginx (LEMP Stack) - Set Up
nginx.confand use a supported CDN as above.
Method #3 - Using an Image Tag
If both of the above methods don't work for you, you can use the image tag. It does not require server configuration (editing nginx.conf) and supports all CDN providers.
Using this method will change the HTML for WebP delivery. It won't work with background images, is incompatible with some themes, caching plugins, lazy loading plugins, etc.
If you use this method, all img tags will be converted like this:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>If the browser supports WebP, the corresponding file is delivered; otherwise, a normal image is delivered.
Customizing an image tag for WebP in WordPress
The easiest way to set up an image tag is through WebP Express.
Set the operation mode to “CDN friendly” and enable “Alter HTML”.
Conclusion
I wish the day would come when all browsers support WebP!
If you can spend a few dollars a month, then the easiest and most efficient way is to use a CDN like BunnyCDN, which will convert images to WebP on the fly. Otherwise, stick to method #2 I mentioned above.
