WebP Fallback for Inline Background Image in Style Attribute

Question

I have developed a theme which has a custom post type called projects. On single project pages there is a parallax style section with a high quality scrolling background image. I am using a custom field ( via ACF plugin) to add this background-image to the project pages, and this custom field is coded into the single project template file. This means I only need one template for all my project pages.

This background image is high quality and so is quite a large image file (it's important to me to retain the quality of the image). I want to add WebP images as the background images to this parallax section. But of course I need to have fallback for browsers that do not support the WebP image format. I have seen lots of articles/tutorials on how to provide fallback for images that are output via the <img> tag, or via the background-image property in the CSS file. But I have not come across a single article referencing how to provide fallback for a background-image output via the style attribute.

I cannot output the background-images via a CSS file or CSS class, because ACF needs to be used in PHP files only, so the custom field needs to be coded directly in the template file (in the style attribute on the necessary <div>)

In summary, how do I provide fallback for the WebP image format for images output via the style attribute? How to provide fallback for inline background-image CSS?

Code example:

<section class="parallaxSection parallaxWide">          
    <div class="parallaxWide--wrap">
        <div class="parallaxWide--elementWrap">
            <div class="parallaxWide--element" style="background-image:url(<?php if( get_field('parallax_bgimage' )) { the_field('parallax_bgimage'); } ?>);">
            </div>
        </div>
    </div>
</section>  

Or, is there another solution to outputting these background images that I'm missing?

Answer 1

Here's couple of wild ideas which you could try, if you're feeling adventurous.

1) Write some conditional logic with $_SERVER to detect if the user's browser is the right type and high enough version, that would probably support the WebP format.

Try using $_SERVER ['HTTP_USER_AGENT'] and see also https://stackoverflow.com/questions/13252603/how-does-http-user-agent-work

2) Add the WebP and fallback image urls as data attributes and use js for the browser detection and to set the WebP or the fallback image as the background-image.

e.g. <div data-webp-bg="some-img-url" data-fallback-bg="another-img-url"></div>

p.s. I don't know how well these would work, but I'm just feeling creative at the moment.

EDIT 22.10.2018 Here's couple of leads you could follow and research more, if you want to come up with working solutions to my wild ideas.

For php take a look at https://github.com/hisorange/browser-detect (originally for Laravel I guess, but I think you could use elsewhere too) or https://github.com/cbschuld/Browser.php for example.

For js, this old thread could prove useful https://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser. See also https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator

Couple of minutes of googling gave me these related articles, https://artisansweb.net/detect-browser-php-javascript/ and https://medium.com/creative-technology-concepts-code/detect-device-browser-and-version-using-javascript-8b511906745

p.s Sorry for all the links and no code. The links are here just to provide nudge to the right direction and to promote own research and learning. This is a learning experience for me too.