Background images and WebP

  • Resolved markman641

    (@markman641)


    2 years, 11 months ago

    I have regenerated the webp files multiple times for my website, yet when scanning my homepage with Google PageSpeed, it says a few images aren’t loading as webp files.
    Looking at the page source, it looks like if the image is in a background image, it doesn’t load the webp?

    <div style="background-image: url(https://i1.wp.com/www.redroll.com/wp-content/uploads/2021/04/63rdarticle.jpeg?resize=578%2C289&ssl=1)" class="slide slide-id-22413 tie-slide-5">

    How do I get this to work?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Stoyan Georgiev

    (@stoyangeorgiev)

    2 years, 11 months ago

    Hey there @markman64,

    It looks like this image is loaded from a CDN and not from the origin server, so it will not be loaded as webP.

    I have noticed that there is an existing webP copy of that image, so if the URL is correct it should be loaded as webP image.

    Kind regards,
    Stoyan

    Thread Starter markman641

    (@markman641)

    2 years, 11 months ago

    Stoyan,

    It was not serving the webp even before I enabled the CDN, so that is incorrect.

    To prove it, I temporarily disabled the CDN and this is the source:
    <div style="background-image: url(&quot;https://www.redroll.com/wp-content/uploads/2019/12/Zeds-Dead-Photo-26-scaled.jpg&quot;); width: 1170px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms ease 0s;" class="slide slide-id-18093 tie-slide-1 tie-thumb slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" data-aria-describedby="slick-slide20">

    Plugin Author Hristo Pandjarov

    (@hristo-sg)

    SiteGround Representative

    2 years, 11 months ago

    First image is dynamically resized thus our webp optimization will not work.

    Second image is served from Cloudflare. If the first user to load it was using old Safari for example, CF has cached the jpg version of the image and not the webp generated one and vise versa. Generally, Cloudflare doesn’t work well with our WebP implementation.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Background images and WebP’ is closed to new replies.