• WebP on WordPress and old browser support

    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:

    1. Start using WebP images right now
    2. Simple fallback solution – implement a fallback method for unsupported browsers
    3. Wait for WordPress support
    4. Support WebP background images
    5. 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.

    50% – 13KB

    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 width and height
    • Sets srcset and sizes for 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

    JPG fallback
    CSS needed to prevent the picture width from exceeding the left column size.  img.picture { max-width: 100%; }

    The original JPG

    50% - 34KB

    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



    Published:

    Last updated:

    October 18, 2021

Categories

Tide times from tidetimes.co.uk

Tide Times & Heights for Langstone Harbour on
Sunday, 05 December 2021
Low Tide:04:44 ( 0.70m )
High Tide:11:51 ( 5.10m )
Low Tide:17:08 ( 0.60m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
5th December 2021
04:44 Low Tide ( 0.47m )
11:47 High Tide ( 5.12m )
17:11 Low Tide ( 0.33m )