Section background images in Elementor not being changed to Webp

[kbrebel04]

As the title states, background images are not being adjusted to Webp. I have placed the same image as an "Image" and its adjusted, however the section/page background images are not.

Dev view:

http://imgur.com/K34B4s6

Image widget, with the same image as background image behind

http://imgur.com/5cwlNlR

 

[qtwrk]

Hi,

.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;
}

Elementor uses CSS to insert background, currently LSCWP can't replace the files in CSS, but our devs have this on to-do list.

Best regards,

 

[lamperdesign]

Hi,

Is here still any solution? Also in Avada theme background is not working with Webp.

Regards,
Kees

 

[Henrik]

Hi,

I'm also interested in a solution for this. Please post a status update!

Kind Regards,
Henrik

 

[qtwrk]

Well , it's still in todo , however, if you are not using any CDN services , then I might have a small trick to workaround it.

 

[Henrik]

I'm not using any CDN services so I am very interested to hear if there is a workaround to it.

 

[qtwrk]

I'm not using any CDN services so I am very interested to hear if there is a workaround to it.

well , this is not a perfect solution , but it should work for you at some point


add

RewriteCond %{HTTP_ACCEPT} "image/webp"
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.*).(jpg|png|gif) $1.$2.webp [T=image/webp,L]

to your .htaccess

this will force webserver to send .webp file when 1) browser supports, 2) webp file exists.

the imperfection is that URL will still be same , but "under the hood" file is webp format and thus reduce the image size

 

[Henrik]

Thanks, it works great!

 

[thatsmehta]

This issue is still not fixed,my sites are using Elementor and all background images are neither converting to WebP nor getting Lazy-loaded

 

[serpent_driver]

@thatsmehta

If you tried rewrite rule from above there is no converting or replacement as with images that are defined im html <img> tag. Therefore you don't see .webp images in html code. This rewrite rule forces the webserver to send .webp file instead of jpg|png|gif if browser supports .webp images.

 

[thatsmehta]

@thatsmehta

If you tried rewrite rule from above there is no converting or replacement as with images that are defined im html <img> tag. Therefore you don't see .webp images in html code. This rewrite rule forces the webserver to send .webp file instead of jpg|png|gif if browser supports .webp images.

I don't have problem with jpg|png|gif|webp images, my problem is background images via CSS/inline are not being lazy loaded.

 

[serpent_driver]

@thatsmehta

I don't have problem with jpg|png|gif|webp images, my problem is background images via CSS/inline are not being lazy loaded.

For this please use cache plugin support page at Wordpress. This forum doesn't support cache plugin any longer.
https://www.litespeedtech.com/support/forum/threads/please-use-the-official-wordpress-forum.16028/