PNG Image via CSS Not Being Optimized to WebP

  • Resolved DannyG

    (@dannygarcia1971)


    6 months, 3 weeks ago

    Hi,

    I’ve been using the LiteSpeed Cache Plugin for WordPress and have encountered an issue with image optimization. Specifically, PNG background images that are called through CSS are not being converted to the WebP format.

    I have already enabled the ‘Image Optimization’ features within the plugin settings and confirmed that other images on the site are successfully being optimized and served in WebP format. However, it seems that PNG background images loaded via CSS remain unchanged.

    Could you please provide some insight into why this might be happening and what steps I can take to ensure that these PNG background images are also optimized? Is there a specific setting or workaround that I need to apply to include images referenced in CSS files in the optimization process?

    I appreciate any guidance you can provide on this matter and look forward to your response.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Support qtwrk

    (@qtwrk)

    6 months, 3 weeks ago

    please check this page

    Thread Starter DannyG

    (@dannygarcia1971)

    6 months, 3 weeks ago

    I already checked that page before. There’s no answer to my question. You really helped me with my previous questions so I hope you can do it once again here.

    Could you please provide some insight into why this might be happening and what steps I can take to ensure that these PNG background images are also optimized? Is there a specific setting or workaround that I need to apply to include images referenced in CSS files in the optimization process?

    I appreciate any guidance you can provide on this matter and look forward to your response.

    Plugin Support qtwrk

    (@qtwrk)

    6 months, 3 weeks ago

    1. some images just won’t have webp version for various reason , you can attach .webp to URI to verify if webp version exists or not , like from https://domain.com/wp-content/uploads/2024/05/something.png to https://domain.com/wp-content/uploads/2024/05/something.png.webp , if it returns 404 , then it means no webp file exist
    2. then provide the report number , and link of image in quesiton
    Thread Starter DannyG

    (@dannygarcia1971)

    6 months, 3 weeks ago

    I have just checked and in my case webp file exists.

    Report number: MWNXLTQP

    Page link: https://bit.ly/3ysxSQ1

    Image in question: https://bit.ly/44RR1H4

    Plugin Support qtwrk

    (@qtwrk)

    6 months, 3 weeks ago

    it is loading webp on me

    Thread Starter DannyG

    (@dannygarcia1971)

    6 months, 3 weeks ago

    Wondering why online services such as https://tools.pingdom.com/ , https://pagespeed.web.dev and https://gtmetrix.com/ find that this background image loaded as PNG so lowering the score? Please see the attached image here.

    Plugin Support qtwrk

    (@qtwrk)

    6 months, 3 weeks ago

    it looks like that image has native webp format ?
    /wp-content/uploads/2024/05/ellipse-BG2.webp     ?

    Thread Starter DannyG

    (@dannygarcia1971)

    6 months, 3 weeks ago

    Yes! I’ve encountered an issue where online performance tools such as Pingdom (https://tools.pingdom.com/), Google PageSpeed Insights (https://pagespeed.web.dev), and GTmetrix (https://gtmetrix.com/) are reporting a background image as being loaded in PNG format, thus reducing the performance score.

    However, the image is actually being loaded in WebP format. I’ve attached the image for your reference above so you can see yourself.

    Could you please investigate this discrepancy and advise on how to resolve it so that the performance tools accurately reflect the image’s format?

    Plugin Support qtwrk

    (@qtwrk)

    6 months, 2 weeks ago

    please go to toolbox -> debug setting -> debug log ON , debug level to advance , debug include uri , add test , then go to toolbox -> log view -> clean up existing log

    now test your page like https://domain.com/?test , then go to log view again , share me the log it generated.

    Thread Starter DannyG

    (@dannygarcia1971)

    6 months, 2 weeks ago

    Thanks for your response, really appreciate your help!! Here’s the log you requested: https://bit.ly/4dWWL6A

    Plugin Support qtwrk

    (@qtwrk)

    6 months, 2 weeks ago

    you were visiting it as login admin

    please run the PSI test on this URI and generate relevant log

    Thread Starter DannyG

    (@dannygarcia1971)

    6 months, 2 weeks ago

    Please kindly see the gtmetrix logs HERE

    Plugin Support qtwrk

    (@qtwrk)

    6 months, 2 weeks ago

    please try this , go to LiteSpeed Cache -> Toolbox -> Purge -> Purge all – Critical CSS , then purge all

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘PNG Image via CSS Not Being Optimized to WebP’ is closed to new replies.