Background images not working as Webp (Elementor)

Can you show me the HTML? (just the part with the background image).

Hi @roselldk thanks for supporting ??

Unfortunately I deactivate and erased the plugin alongside with all the Webp images created.

If I can test it again I’ll let you know.

Regards.

Hey, it’s because Elementor uses CSS to insert background like this for example:

.elementor-41 .elementor-element.elementor-element-42a27ef6:not(.elementor-motion-effects-element-type-background), .elementor-41 .elementor-element.elementor-element-42a27ef6 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url("https://domain/wp-content/uploads/2019/06/test..jpg");
    background-size: contain;
}

Are you going to make Webp Express compatible with this?

Edit: I’ve just seen that in another post you said the .htaccess rewrite should work for CSS background images as well as lazy loaded images but it doesn’t seem to do so with Elementor for some reason.

• This reply was modified 3 years ago by tdrv.

Before I uninstalled it, I could see that some widgets fails to load Webps as well. Maybe the same CSS issue?

Regards.

I’ve ran some more tests, when I’m using CDN Friendly operation mode everything seems to be working fine when I do the live tests (Elementor CSS backgrounds not being replaced though). However, when I’m using Varied Image Responses and having setup my CDN (Cloudflare) correctly as per the FAQ – the live test for checking if non-supporting webp browsers get JPEG is unsuccessful. Image is returned from Cloudflare cache.

I’d greatly appreciate some help with this whenever you have the time.

@roselldk

Hey again!

After even more testing I somehow managed to make it work, Elementor background images are served as webp!
To be honest, I’ve got no clue what made it work but here’s the settings I used:
Screenshot #1, Screenshot #2

However I think webp images are being served even to non-supporting browsers since the live test still fails ??

@albridi I hope you test this and it works for you as well

@tdrv thanks for your aid, but I’m going to forget about Webp format for the moment. I’ve some other big headaches to solve urgently.

I hope you get lucky and success with your Webps images.

Kind regards.

I tried it out:
1) I installed Elementor plugin
2) I inserted a background image on the section, using “classic” background type

Yes, the background is CSS. And whats more. The CSS is located in an external stylesheet. That last point the difference. Alter HTML does replace urls in CSS, when the CSS is part of the HTML and “Replace image URLs” is choosen. But it does not process external CSS. So Alter HTML cannot help you. I have no plans to create a feature that replaces CSS in external .css files. It is probably possible, but I imagine that there would be many pitfalls.

However, as you say, the .htaccess files even works with external CSS (and yes, lazy loaded images too), as they redirect the image request itself. I tested it right now. Elementor + WebP Express with redirect rules – Works!

So the issue you are facing, @tdrv, is that varied image responses aren’t very CDN friendly. On most CDNs you must tweak their settings in order to make it work. If you want me to help you getting Cloudflare to work with varied image responses, please start a new topic so this one doesn’t get polluted.

• This reply was modified 3 years ago by rosell.dk.
• This reply was modified 3 years ago by rosell.dk.
• This reply was modified 3 years ago by rosell.dk.

Closing.

Status:
Elementor places its background images in external CSS. Alter HTML does not process external CSS files and there are no current plans to support it. You will need to use varied image responses (.htaccess redirects) in order to serve the Elementor backgrounds as webp.

I managed to make Alter HTML work with Elementor backgrounds!

There is an Elementor setting which makes it insert the CSS declarations in the HTML rather than in an external file.

Here is what you need to do:
– Activate “Improved CSS Loading” in Elementor. You find it in Elementor > Settings > Experiments
– In WebP Express Alter HTML settings, you must use “Replace image URLs”.

@tdrv, @albridi

Great to read that @roselldk , thanks for your efforts ?? !

I’ll give it a try soon.

Regards!