In this post I consider my options for implementing WebP on WordPress for improved website performance while supporting old browsers.
WordPress 5.8 now supports WebP (.webp ) images, but some browsers / devices don’t. My iPad, running iOS 12.5.5, doesn’t.
WordPress doesn’t yet have any logic to support fallback to .jpg when the browser doesn’t support .webp. If you want to support .webp for modern browers with a fallback to .jpg for those that don’t, you’ll have to find your own solution for the time being.
In this post I consider the following options:
- Start using WebP images right now
- Simple fallback solution – implement a fallback method for unsupported browsers
- Wait for WordPress support
- Support WebP background images
- Serve WebP images using the mod_rewrite method
Start using WebP images right now
If you’re using a browser that supports WebP images then the following Image block should correctly display the .webp image that was uploaded. If not, you’ll see whatever your browser displays to represent a broken image.
WebP on WordPress
Implementing WebP on WordPress is possible right now using WordPress 5.8. You don’t need a plugin, but you do need to be able to create .webp files. When you upload a WebP image to the Image block the HTML created in the editor looks like this.
<!-- wp:image {"id":22523,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://herbmiller.me/wp-content/uploads/2021/10/oik-types-banner-772x250-50.webp" alt="" class="wp-image-22523"/><figcaption>50% - 13KB</figcaption></figure>
<!-- /wp:image -->During rendering on the server the <img> tag is improved by wp_image_add_srcset_and_sizes().
<figure class="wp-block-image size-full"><img loading="lazy" width="772" height="250" src="https://herbmiller.me/wp-content/uploads/2021/10/oik-types-banner-772x250-50.webp" alt="" class="wp-image-22523" srcset="https://herbmiller.me/wp-content/uploads/2021/10/oik-types-banner-772x250-50.webp 772w, https://herbmiller.me/wp-content/uploads/2021/10/oik-types-banner-772x250-50-300x97.webp 300w, https://herbmiller.me/wp-content/uploads/2021/10/oik-types-banner-772x250-50-768x249.webp 768w" sizes="(max-width: 772px) 100vw, 772px"><figcaption>50% – 13KB</figcaption></figure>This improvement automatically caters for other performance recommendations:
- Lazy loading of images
- Sets
widthandheight - Sets
srcsetandsizesfor responsive images
Simple fallback solution
For browsers which don’t support WebP, the HTML that could be used to display the appropriate image is
<picture>
<source srcset="https://herbmiller.me/wp-content/uploads/2021/10/oik-types-banner-772x250-50.webp" type="image/webp">
<img src="https://herbmiller.me/wp-content/uploads/2021/02/oik-types-banner-772x250.jpg" alt="JPG fallback" class="picture">
</picture>So here’s a version that should work on my iPad. You should see two images.
WebP or JPG fallback
img.picture { max-width: 100%; }The original JPG
Wait for WordPress support
In order to implement a fallback to .jpg we need a JPEG image to display.
- Will WordPress automatically create image format variants in the same way that it creates different sizes?
- Will WordPress automatically build the
<picture>tag?
I don’t know the answer to these, but there are already plugins that aim to help. To be (re-)investigated.
Support WebP background images
Many websites use background images displayed using CSS. These are normally large images as they may have to cover the full screen. Do we need a fallback method for these images? Or can we just display a coloured background or gradient? In which case, why not do this in the first place?
<div class="parent">
<a href="#bg-geshi">
<div class="child" style="background-image: url('https://herbmiller.me/wp-content/uploads/2021/10/oik-types-banner-772x250-50.webp')">
<span>Background image webp</span>
</div>
</a>
</div> There are already solutions that use JavaScript to automatically alter class attributes that enable the most appropriate background image to be loaded. One solution is to use Modernizr to perform the detection of WebP support. The HTML & CSS will have to be rewritten to cater for the two image formats.
Serve WebP images using the mod_rewrite method
Another solution uses the web server to attempt to deliver .webp images whenever .jpg or .png files are requested by browsers that support .webp. It assumes that for each image file there’s a WebP version with the same base name.
For details see Step 6 of How to create and serve WebP images.
I assume that it’s also possible to do the reverse. If a browser that doesn’t support .webp requests this type of image can we return the original .jpg? Or is this solution fraught with problems?
Preliminary conclusion
I’ve already started to use WebP images for my latest blog posts. Performance is very good.
- In my local development version of this site the Lighthouse figure for Performance is between 96 and 100.
- I’m going to try both the Modernizr and mod_rewrite approaches to see how the performance is affected. If it’s for the better, and it means that I can get to see WebP images without having to change my content, then I’ll seriously consider implementing it on the live site.
- I’ll need a solution that automatically creates the WebP version of each JPEG or PNG.
- I’ll also be trying at least part of the Modernizr approach for background images.
References
- WordPress 5.8 adds WebP support
- WebP – Frequently Asked Questions
- Modernizr
- WebP for my iPad – my earlier attempt to use WebP, pre WordPress 5.8
- Image size reduction by quality – investigating image size reduction
- Lighthouse Chrome Dev Tool