Support » Plugin: Autoptimize » Background Images Not Converted to WebP

  • Background images on our site aren’t being served in WebP format. The images are being served through the Shortpixel CDN, but in jpg format. Any suggestions how to fix this so that it serves WebP?

    We’ve set the plugin to “Automatically serve ‘next-gen’ WebP image format” and we’ve enabled “Image lazy-loading”.
    Have also enabled “Aggregate all linked CSS files” and “Autoptimize to also aggregate CSS in the HTML”

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    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)?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

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

    ok, sent.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    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.

    wappguru

    (@wappguru)

    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.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Background Images Not Converted to WebP’ is closed to new replies.