First image on front page won’t be replaced with webp version

Hmm, I realized now that the original image is be a bit smaller than the actual container on desktop on my computer. I know I read somewhere that you won’t upscale in that case, but you would still serve a webp version, right?

Hi @jenseo –

Jetpack CDN doesn’t work on background images. I couldn’t tell exactly how the image is inserted into the page (whether with CSS or JavaScript), but this is why it isn’t being picked up by the CDN.

If you can figure out where to reference the image in your theme, you could append the Jetpack CDN before it, i.e.:

https://i0.wp.com/jetpack.com/wp-content/uloads/2021/11/banner.jpg

In this example, you would replace the Jetpack.com reference and path with the path to your image.

If you need help figuring out where to change this, you will need to reach out to your theme authors:

https://themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/5484319/support

Thank you Bob for looking into this, the thing is that it does work on the other banners further down on the page. The background images are set with inline css.

If you look in the source code and search for the following id’s you can see the styling blocks:

#banner-1593036140 (first banner, image not replaced)
#banner-930728637 (second banner, image is replaced)
#banner-1398313353 (third banner, image is replaced)

So it only affects the first banner element on the page, the other ones are replaced correctly.

I’m not familiar with how the Flatsome theme works, so I can’t figure out why this is happening.

Where you set the background image on your site, can you set it using the solution I offered above? That would ensure that the CDN image is served.

Yes, that should be doable, thanks! Yes, I haven’t been able to figure out as of why it works on all elements but the first one, that’s a bit weird. But I can implement the url manually, just a shame I won’t get the resizing benefits then ??