Background image not using webp on certain pages

  • Resolved oshika35

    (@oshika35)


    2 years, 9 months ago

    Report number: YDAWMEUE

    Hello,

    I’m currently having an issue with background images. I’m using Grid Builder, a plugin to create filterable grids. I’m using it to show products created with WooCommerce. The cards are rendered using a background-image. However, I don’t understand why on some pages they will correctly use the webp version of the image but in other pages they won’t. The HTML structure look the same for those background images (with a little difference I’m describing below).

    I tried :
    – Purging the cache
    – Disabled/Enabling again LiteSpeed LsCache in Cpanel
    – Disabling the plugin (but then everything is going back to .jpg)
    – Disabling and enabling again the WebP replacement.

    I also noticed something, the background images in the grids I’m using in my home page (everything works here) look like that:
    background-image:url(https://example.com/wp-content/uploads/2022/02/example.jpg.webp)

    But in any other page using a grid it looks like that:
    background-image: url("https://example.com/wp-content/uploads/2022/01/example.jpg");

    I noticed the second version is using " ", I’m not sure if this is the reason why it doesn’t work.

    The problem could also be coming from Grid Builder but previously I used ShortPixel (I uninstalled it and cleanly removed all the files related to it, after that I switched to Quic.Cloud, and I also restored all the images to the original ones before doing so) and the .webp files were correctly used for the grids in all my pages.

    Also, another weird issue, on certain pages, in the source panel, the images will be shown as ‘Webp’ images despite having .jpg and not .jpg.webp in their slug.
    (I’m still talking only about background images here). On other pages, there will be shown as .jpg everywhere (slug included). Purging all the caches I could think about didn’t solve that.

    I’m not sure what else I could do to make it work,

    Best regards,
    Oshika

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

    (@qtwrk)

    Hi,

    please check this page

    best regards,

    Thread Starter oshika35

    (@oshika35)

    Hello,

    Thank you for your answer, unfortunately, I already checked this page before posting.
    I have some questions about it that I forget to ask in my original post.

    At first I thought this was the reason:

    The plugin can only perform WebP replacement on the HTML tag. If the image is loaded via CSS, JS, or some other means, LSCache may not be able to correctly insert the WebP file.

    But then why would the homepage background images successfully return the webp versions?

    I also checked the ‘Some WebP Load, Some do Not’ part, but all the images were prefaced with the correct site address.

    Finally, I used the debug log in advanced mode to see what was going on. I’ll try to sum up my findings, please note I’m always talking about the grid builder images.

    In the homepage, everything works, the images are displayed as .webp both in the source dev tool menu and in the slug (.jpg.webp).
    In the /catalog/ page, the images are displayed as .webp only in the source dev tool menu. The slug only ends with .jpg.
    Finally, in another page related to a category, they are not displayed as .webp both in the source dev tool menu and in the slug.

    However, for all those pages (including the last one) the log says it replaced successfully the image with a webp version.

    Any ideas of what is happening ?

    Best regards,

    Plugin Support qtwrk

    (@qtwrk)

    In the /catalog/ page, the images are displayed as .webp only in the source dev tool menu. The slug only ends with .jpg.

    this menas something else was doing it , like replace it to webp while retain the .jpg extension , all the webp replacement done by LSWP will be in format as filename.jpg.webp

    But then why would the homepage background images successfully return the webp versions?

    how was image loaded in other page than homepage ? HTML tag ? CSS ? JS ?

    However, for all those pages (including the last one) the log says it replaced successfully the image with a webp version.

    please share the log

    Thread Starter oshika35

    (@oshika35)

    Thank you for your answer, as I prefer not sharing the log publicly, I’ll open a ticket with your support, or probably use the premium support as I’m running out of time.

    Thanks a lot for the support your provided.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Background image not using webp on certain pages’ is closed to new replies.