In JS WebP, there's a check whether or not the browser supports WebP images. This script can also add the class "webp" to the BODY tag.

This will allow CSS styles like ".webp header { background-image: file.webp }" to deliver the best possible background images.

Doing this will plug the functionality hole in JS WebP delivery and work on inline style blocks and external stylesheets. Importantly, it will cover media queries, which are not permitted in elements' inline "style" attributes.

The only caveat here is that the addition of the class must occur before the browser processes the CSS and starts to fetch the background images in the original format.

This seems like a very small addition, possibly with no downside, but with the upside of reducing page loading time.