CSS Background images

Yes, in some configurations.

1.
If you choose Varied Image Responses, even images in external CSS or loaded dynamically with javascript will be internally redirected to webp for browsers that supports it

2.
If you choose CDN friendly and choose “Replace image URLs”, background images in inline CSS will be replaced. Note that only css which is part of the HTML document is altered. It does not operate on external css. But luckily, background images for hero images and such are usually inline.

Thanks for that!

Followup question: Is there a tradeoff or caveat when using Varied Image Responses?

• This reply was modified 5 years, 11 months ago by aglyons.

Varied Image Responses works perfectly when you are not using a CDN. But if you are, most CDN’s needs configuration. On many CDNs you can configure it to use the accept header as cache key. This works, but as there are many possible accept headers, it means the cache is many-doubled. So it does not perform well. Some CDN’s however have an option so the cache is only doubled, and that works well. This reduced cache performance on the CDN only affects the requests to the originals. So if you combine Varied Image Responses with alter HTML, you will get perfect image cache performance on the image urls that are altered (regardless of which alter html method you choose) – while ensuring that the images that the alter HTML does not reach (such as images in external stylesheets) also gets delivered as webp

Hi, I also have problem with background images on my site:

https://bosslimuzyny.pl/

background images are in header and in div above Contact Form, but they aren’t linked to webp.

My settings:
<br />image host<br />

how can I make this right?