Background Images Not Converted to WebP

that’s a correct observation; currently background-images don’t lazy-load and are not converted to webp (yet).

frank

Is there any way to get around that (other than redoing the site code to place images inline)?

afraid not; I’ve still to find a solution in AO proper.

Was just about to ask the same question and thought i’d do a search first ??

My sitewide background image, which i inserted via the site customizer background image option, doesn’t lazy load.

Has any progress been made on this issue?

Has any progress been made on this issue?

no, not yet. question; is the bg-images added inside a div node in a style attribute (which will likely be supported in AO26), or is it referenced in your (autoptimized) CSS?

Looks to be in a style attribute. Is that the one that will likely be supported in AO26? Do you have an ETA for that release yet?

Looks to be in a style attribute. Is that the one that will likely be supported in AO26?

yes

Do you have an ETA for that release yet?

the official release? Q4, probably latter half, towards end-of-year.

I just committed to the beta version on github, would be great if you could download AO26 beta to confirm if this indeed now also lazyloads (and webp’s) your background images @accuracast and @martychc23 ! ??

frank

Hey Frank, nope. Still not lazy loading background or converting to webp.

I am using the Extra theme by Divi. I can send you a copy if that helps?

nah, a URL would be more helpful really, I would need to see what is happening in the HTML ??

ok, sent.

Had a look, it doesn’t work because the background is not set in the style attribute of a div Marty, but in (inline) CSS instead.

<div id="123" style="background-image:url(123.jpg)"></div>

can be lazyloaded (as we can move the real background img URL to data-bg attribute in the HTML), but

<style>.123{background-image:url(123.jpg);}</style>
<div id="123"></div>

cannot be lazyloaded, as that would require way too complex parsing of CSS & HTML.

summary; lazyloading of background-images is supported for background-images that are the in the style attribute of the div in which they’re set.

frank

Hey there,

I ran into the same problem with Divi. I have a Background Image and I do not get the .webp-Version of it. (500KB vs 80KB).

I do not care that much about lazy loading, but webp-Delivery would be great. I tried the Beta and it is still png – just for Info.

Guess this is the problem:

div.et_pb_section.et_pb_section_0 {
background-size: initial;
background-position: top center;
background-image: url(https://XXX/XXX.png),radial-gradient(circle at center,#ffffff 65%,#ffa7c1 100%)!important;
}

Thank you for your great tool Frank!

Greetings
Andy

indeed, background images in CSS (so not in a style attribute of e.g. a <div tag) cannot be lazyloaded and hence cannot be switched to webp on the fly.

I’ve been battling this for a few weeks now…

I figured I should just give up until autoptimize, wprocket, and imagify figure this out. I’m not sure yet if it works with hummingbird and wpmudev smush pro. Looks like the best option is to give up lol.

So with .webp images you can’t use a lazy loader. They also don’t work for many background images… which are usually the ones that need .webp the most.

The main downside to this is the google pagespeed insights scores. I use this score because hey… Google is the #1 search engine and likely use these scores for ranking.

The scores are pretty much the exact same if you use lazy load + non .webp image compress OR use .webp compress and non lazy load… depending on how your website is setup, it’s almost better to not use .webp at all until this is figured out by the pros.