[Smush Pro] Smush CDN for certain images

Hi,

We’ve recently enabled the Smush CDN on our website, and it’s working great so far, but there’s some images that aren’t being served over the CDN. The three examples I’ve noticed are:

1. Images output as a background image in a style attribute with wp_get_attachment_image_url().

2. Image URLs in a <source> tag for a <picture> element, also from wp_get_attachment_image_url().

3. Image URLs manually passed to a srcset attribute of wp_get_attachment_image() using wp_get_attachment_image_url().

These are all images that are output in our (bespoke) theme’s template files. I’m assuming they’re not served from the CDN because whatever method the plugin uses to find and upload images is just based on the src attribute of img tags, but what I was hoping to find is whether there is a function or filter I can use inside the template files to manually indicate images that need to be uploaded. Something like the (now deprecated) filter that the WP Offload S3 Assets add-on supported: https://deliciousbrains.com/wp-offload-media/doc/get-asset-url/

Does anything like this exists? Is there a way for us to serve these images using the CDN? Even if we had to manually specify the dimensions.

Thanks.

  • Kasia Swiderska
    • Support nomad

    Hello secretlyfamous ,

    The latest version of Smush does support background images, like one I can see that is on your site and not working.

    But it should work on your site. I can see that all the background images are the following template:

    <div style="background-image: url(imagepath/image.jpg);">Something</div>

    that is supported.

    Can I take a closer look on your site and see what could be the reason it’s not working? To enable support access you can follow this guide here:

    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please respond in this ticket once access is granted.

    kind regards,

    Kasia

  • Kasia Swiderska
    • Support nomad

    Hello secretlyfamous ,

    I spoke with developer and this is a bug in the Smush. Images are not server from CDN because in the styles they are not wrapped in the single ‘ or double ” quotes.

    Right now they looks like that on your site:

    style="background-image: url(https://DOMAIN.COM/wp-content/uploads/2018/04/banner-web-design-1024x785.jpg);"

    but should start working when changed to:

    style="background-image: url('https://DOMAIN.COM/wp-content/uploads/2018/04/banner-web-design-1024x785.jpg');"

    This will be fixed in the next version of Smush.

    I apologize for the inconvenience.

    kind regards,

    Kasia

  • secretlyfamous
    • Design Lord, Child of Thor

    Thanks Kasia, it looks like I also needed to make sure that the semi-colon was present, as it didn’t work without that either.

    Also in regards to background images, they’re being correctly optimised, but don’t appear to be deferred when lazy loading is enabled. Is it correct that lazy loading of background images is not currently supported?

    Lastly, I wanted to ask about <picture> elements again. We have a section where there’s separate images for mobile and desktop, but when each is hidden for the other’s screen size using only CSS, the image is still downloaded. The solution, as I understand it, is to use the picture element, however it doesn’t appear to be supported by this plugin. Are there plans to add support? Or another method you suggest?

  • Patrick Freitas
    • Staff

    Hi secretlyfamous

    Hope you are doing well.

    Thanks Kasia, it looks like I also needed to make sure that the semi-colon was present, as it didn’t work without that either.

    I’m happy that adding the semi-colon worked, we are already working to improve this to work without it too.

    Also in regards to background images, they’re being correctly optimised, but don’t appear to be deferred when lazy loading is enabled. Is it correct that lazy loading of background images is not currently supported?

    The Lazy Load will only work for <img><figure> tags, the background image isn’t supported at this primary moment.

    The <picture> will contain an img tag too.

    <picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
    </picture>

    It will Lazy Load correctly, however, the <source media=””> tag won’t be added on CDN, I will forward this request to our developers and check f we have any plans to add on our Roadmap.

    Best Regards

    Patrick Freitas

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.