webp – for wordpress

/ SprUng, Websites - more cheats, wordpress - more cheats / 9 minutes of reading

More from this category


Extra advice for webp – cloudfront / s3 bucket

https://www.keycdn.com/support/wordpress-cache-enabler-plugin
https://wordpress.org/plugins/webp-express/
https://developer.wordpress.com/docs/photon/api/ – possible reason for jetpack
https://support.cloudflare.com/hc/en-us/articles/360000607372 – cloudflare can create – have to sort out with cloudfront?

So it looks like you may need to follow this section from the above article:

The WebP Express / Cache Enabler setup is quite potent and very CDN-friendly. Cache Enabler is used for generating and caching two versions of the HTML (one for webp-enabled browsers and one for webp-disabled browsers)

The reason for doing this could be:

  1. You are using a CDN which cannot be configured to work in the “Varied image responses” mode.
  2. You could tweak your CDN to work in the “Varied image responses” mode, but you would have to do it by using the entire Accept header as key. Doing that would increase the risk of cache MISS, and you therefore decided that do not want to do that.
  3. You think it is problematic that when a user saves an image, it has the jpg extension, even though it is a webp image.

You need:
1 x WebP Express
1 x Cache Enabler

  1. Setup WebP Express
    If you do not want to use serve varied images:
    – Open WebP Express options
    – Switch to CDN friendly mode.
    – Set File extension to “Set to .webp”
    – Enable Alter HTML and select Replace image URLs. It is not absolutely necessary, as Cache Enabler also alters HTML – but there are several reasons to do it. Firstly, Cache Enabler doesn’t get as many URLs replaced as we do.

WebP Express for example also replaces background urls in inline styles. Secondly, Cache enabler has problems in edge cases. Thirdly, WebP Express can be configured to alter HTML to point to corresponding webp images, before they even exists which can be used in conjunction with the the Convert non-existing webp-files upon request option. And this is smart, because then you don’t have trouble with Cache Enabler caching HTML which references the original images due to that some images hasn’t been converted yet.
– If you enabled Alter HTML, also enable Reference webps that hasn’t been converted yet and Convert non-existing webp-files upon request

– If you did not enable Alter HTML, enable Convert non-existing webp-files upon request to original image

If you want to Cache Enabler to create tags but still want the magic to work on other images (such as images are referenced from CSS or javascript):
– Open WebP Express options
– Switch to Varied image responses mode.
– Set Destination folder to “Mingled”
– Set File extension to “Set to .webp”

– I suggest you enable Alter HTML and select Replace image URLs. And also enable Reference webps that hasn’t been converted yet and Convert non-existing webp-files upon request.

  1. Setup Cache Enabler
    – Open the options
    – Enable of the Create an additional cached version for WebP image support option
  2. If you did not enable Alter HTML and Reference webps that hasn’t been converted yet: Let rise in a warm place until doubled
    WebP Express creates webp images on need basis. It needs page visits in order to do the conversions . Bulk conversion is on the roadmap, but until then, you need to visit all pages of relevance. You can either do it manually, let your visitors do it (that is: wait a bit), or, if you are on linux, you can use wget to grab your website:

wget -e robots=off -r -np -w 2 http://www.example.com

flags:
-e robots=off makes wget ignore rules in robots.txt
-np (no-parent) makes wget stay within the boundaries (doesn’t go into parent folders)
w 2 Waits two seconds between each request, in order not to stress the server

  1. Clear the Cache Enabler cache.
    Click the “Clear Cache” button in the top right corner in order to clear the Cache Enabler cache.
  2. Inspect the HTML
    When visiting a page with images on, different HTML will be served to browsers, depending on whether they support webp or not.

In a webp-enabled browser, the HTML may look like this: , while in a non-webp enabled browser, it looks like this:

  1. Optionally add Cache Enabler rewrite rules in your .htaccess
    Cache Enabler provides some rewrite rules that redirects to the cached file directly in the .htaccess, bypassing PHP entirely. Their plugin doesn’t do that for you, so you will have to do it manually in order to get the best performance. The rules are in the “Advanced configuration” section on this page.
    avatar
    Type a message here…

https://wpspeedmatters.com/serve-webp-in-wordpress/

If you’ve analyzed your site via Google PageSpeed Insights, you must have probably seen the error “serve images in next-gen formats”. Well, WebP is that next-generation format.

WebP error PageSpeed Insights
WebP error PageSpeed Insights

However, delivering images WebP isn’t that easy. It depends on your server web server, cdn of choice, theme, cache plugins etc.

This guide helps you to deliver images as WebP in WordPress in 3 methods.

Table of Contents
  1. What is WebP?
  2. Why not use WebP everywhere?
  3. Why serving WebP is hard?
    1. Using picture tag
    2. By varied response
    3. Picture tag vs Varied response
  4. How to Serve Images in WebP in WordPress?
    1. Method #1 – Use CDN with only the fly WebP conversion
    2. Method #2 – Using varied response + CDN
    3. Method #3 – Using picture tag
  5. Conclusion

What is WebP?

A new image format for the Web

Google

WebP is an image format (just like png and jpg), developed by Google. Images in WebP format (.webp) are generally much smaller, which makes websites faster and use less bandwidth.

Depending on the image, you may get a reduction of 25% to 70% in size.

webp convert
webp convert

JPEG, PNG, GIF etc have their own pros and cons. The table below will give you an idea:

JPG GIF PNG SVG
Vector ❌ ❌ ❌ ✅
Raster ✅ ✅ ✅ ❌
Transparency ❌ ✅ ✅ ✅
Animation ❌ ✅ ✅ ✅
Lossy ✅ ❌ ❌ ❌

WebP comes with almost all the features mentioned above! Then why can’t we use WebP everywhere?

Why not use WebP everywhere?

webp support
webp support
WebP Browser Support

As you can see only 80% of the devices only supports WebP. Not just outdated browsers, Safari/iOS Safari still doesn’t support WebP.

Why serving WebP is hard?

As you’ve noticed we’ve to deliver images according to the browser. If the browser doesn’t support WebP, we’ve to serve them the original image (jpg/png/gif).

There are mainly two ways to serve WebP:

Using picture tag

We can use picture tag to tell the browser that we do have WebP format. If the browser supports it, it will be fetched otherwise normal/fallback image.

<picture>
  <source srcset="img.webp" type="image/webp">
  <source srcset="img.jpg" type="image/jpeg"> 
  <img src="img.jpg">
</picture>

By varied response

In varied response, you have a single file as usual. Just like this:

<img src="img.jpg" />

The single image URL is capable of delivering jpg and webp. It’s done by the server.

Even though it’s file extension is ‘.jpg’, if browser support WebP, then it’s response will be WebP. Also called ‘varied response’.

Picture tag vs Varied response

Each has its own pros and cons. Here is a comparison table:

Picture tag Varied response
Works with background images ❌ ✅
CDN friendly ✅ ✅ (only a few)
Need to configure the server ❌ ✅ (Nginx)
Works with lazy loading ✅ ✅

How to Serve Images in WebP in WordPress?

Method #1 – Use CDN with only the fly WebP conversion

This is probably the easiest solution. Some CDN providers nowadays support converting images to WebP on the fly, along with image optimization.

Here are few:

BunnyCDN Review, Comparison & Setup Guide for WordPress

Method #2 – Using varied response + CDN

As described above ‘varied response’ will have a single image URL which is capable of serving both WebP and non-webp image based on the requested browser.

We also need to pick the right CDN that supports WebP request headers as a cache key. Otherwise once WebP image is cached in the server, the same will be delivered to browsers that don’t support WebP.

Setup varied response in WordPress

The easiest way to set up the varied response for WebP in WordPress is via WebP Express plugin. Just install the plugin and click ‘Save settings and force new .htaccess rules’.

WebP Express Settings
WebP Express Settings

WebP Express will set up a WebP converter and rewrite rules so that on receiving the request it will convert images to WebP on the fly and if the browser doesn’t support WebP, the default image will be delivered.

If you’re in Nginx

WebP Express adds necessary ‘.htaccess’ rewrite rules, but it only works in Apache or LiteSpeed or OpenLiteSpeed server. If you’re in Nginx, you’ll need to edit nginx.config and 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 converter
location ~* ^/?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 necessary response headers (vary and cache-control) and try to deliver WebP if exists, otherwise, forward it to converter (based on the browser support)

CDN providers that support ‘Varied response’

If your CDN provider doesn’t support WebP as a cache key, then WebP files will be delivered to non-webp supported browsers. Similarly, there are also chances that non-webp images will be delivered to supported browsers.

, , and many other CDN providers support WebP as a cache key. Make sure you enable them in settings.

In :

bunnycdn webp cache key
bunnycdn webp cache key

In :

keycdn webp cache key
keycdn webp cache key

Using Cloudflare free plan?

Unfortunately, Cloudflare free plan doesn’t support WebP as a cache key. Either use a CDN like BunnCDN or upgrade to their pro plan.

Make sure WebP Express is installed.

Method #3 – Using picture tag

If both of the above methods don’t work for you, you can use the picture tag. It doesn’t require any server configuration (editing nginx.conf) and it supports all CDN providers.

If you use this method, all img tags will be converted to something 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 normal image.

Setup picture tag for WebP in WordPress

The easiest way to set up picture tag is via WebP Express.

Set the operation mode to ‘CDN friendly’ and turn on ‘Alter HTML’

webp express picture tag
webp express picture tag

Conclusion

I wish there will be a day where all browsers support WebP!

If you can spend a few dollars a month, then the easiest and efficient way is to use a CDN like BunnyCDN that will convert images to WebP on the fly. Otherwise, stick with method #2 I mentioned above.

Scroll to Top