Plugin not converting homepage background pic to webP

  • Resolved xwrecon

    (@xwrecon)


    9 years, 2 months ago

    Running a Genesis Framework Child Theme, here is the demo:
    Showcase Pro Theme: https://showcase.designbybloom.co/

    I have the following plugins: Optimus => Autoptimize => Cache Enabler to create webP versions of my images. I have used this combination on some other sites and when appropriate (ex. Chrome) the webP version is used for the images everytime.

    I am creating a site using the Showcase Pro theme and the background image is not being converted to webP format.

    I uploaded the image and confirmed that the webP versions were created. The added my uploaded picture to the homepage via Appearance => Customize => “Front Page Header Image”

    Here is the code from the homepage:

    <div id="front-page-1" class="front-page-1 page-header bg-primary with-background-image" style="background-image: url(https://showcase.designbybloom.co/wp-content/themes/showcase-pro/images/page-header.jpg)">

    Is there a reason this image does not get converted to webP? Also is there a way to fix this? I ask because the webP version of the image is 30% smaller in size than the jpg.

    Your thoughts are appreciated!

    • This topic was modified 9 years, 2 months ago by xwrecon. Reason: mistake
Viewing 6 replies - 1 through 6 (of 6 total)
  • codyarsenault

    (@codyarsenault)

    9 years, 2 months ago

    Are you able to provide the URL of your website? Also, have you checked your file system to ensure that the .webp version of the image is in fact there? Are the other images on the same site showing webP?

    Thread Starter xwrecon

    (@xwrecon)

    9 years, 2 months ago

    @codyarsenault

    I checked the file system and Optimus created all the webP versions for everything I uploaded into the WP media library.

    Here is my live test site (https://www.chicagostaycation.com) as you can see the homepage shows that it is the cached version:
    Cache Enabler by KeyCDN @ 06.04.2017 11:52:49 (webp gzip)

    But no webP for the main image.

    Looking at the about page the image used on this page is the webP version:
    https://www.chicagostaycation.com/about/

    THe only difference between the two pages that I can see is that the homepage image was set through the Appearance => Customize

    Let me know what you think!

    codyarsenault

    (@codyarsenault)

    9 years, 2 months ago

    I see the issue. Those banner images are defined in your stylesheet as a background-image. Your other image in the body however is defined directly within the HTML using which is why it works. The Cache Enabler cannot parse the images defined in the stylesheet.

    Thread Starter xwrecon

    (@xwrecon)

    9 years, 2 months ago

    @codyarsenault

    Do you know if there is a work around to get it out of the stylesheet? The cost savings in size is a big one which is why I ask.

    Thanks for all the help on this!

    Plugin Author KeyCDN

    (@keycdn)

    9 years, 2 months ago

    There is no workaround for this at the moment. The only option is to move the image reference to your HTML code instead of referring them in your CSS.

    Thread Starter xwrecon

    (@xwrecon)

    9 years, 2 months ago

    Thanks for your help with this! I will look into moving that pic into the html.

    One thing I will say is figuring out how to do this and update the plugin would be a huge gain for alot of people since many themes make use of a large image as their background image.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Plugin not converting homepage background pic to webP’ is closed to new replies.