Hi Berdini, I’m afraid Elementor (like a few other page builders) doesn’t use markup compatible with JS WebP Rewriting. They put the code in a separate style block, which makes it impossible to do anything with those image URLs.
We are working on implementing a solution for our Easy IO service that would serve WebP images (among other optimizations) for those Elementor background images. If that’s of interest to you, see https://ewww.io/easy/
Also see https://github.com/nosilver4u/ewww-image-optimizer/issues/168
Thanks a lot for your time!!!
The Easy IO service in EWWW IO now has the ability to address background images from Elementor and convert them to WebP!
Hi, perfect! The only way to get that function will be the suscription one, right?
The “<picture> WebP Rewriting” would work as well?
Technically, there are two ways to get WebP for those background images:
1. The server-level .htaccess rules. But this method is not compatible with some CDNs and caching systems, notably Cloudflare.
2. The Easy IO subscription (any level): https://ewww.io/easy/
The latter does require that you configure Elementor to use inline/embedded CSS, otherwise it puts the CSS in an external file that we can’t alter.
The <picture> WebP method only supports native img elements, so no background images work with this method. Essentially, if you use Elementor or Divi to add background images (possibly other page builders I haven’t tested yet), then <picture> WebP will be pretty limited.
