Optimize background images or sliders

problem is that AO relies on JavaScript to differentiate between browsers that support AVIF or WebP and that that JavaScript hooks into AO’s lazyload to do so and that lazyload does not work on background images unless they are set in inline styles (i.e. as part of the node where the background image is to be shown in).

sliders are another issue, likely due to the slider using JS to load images instead of <img or <picture tags.

hope this clarifies,
frnak

I partially understand! But not all! see my background image gets into the shortpixel and is optimized, but without the AVIF and WebP format, what can this be connected with? How to solve?

background picture is embedded in HTML!

And sorry, I’m a beginner, I’m learning and still don’t understand a lot! It turns out that I can not use your plugin to make photos in the slider in AVIF and WebP format and load them from the shortpixel? did I understand correctly? or is it possible?

my site is https://dkfiona.ru/

I use a slider:
https://kenwheeler.github.io/slick/

Ah, the reason is the fact the <img tags in the sliders don’t have a src, but a lazy-src instead, which AO does not act upon.

Thank you! slightly altered the slider and it worked!

And tell me how to remove unused CSS code in your plugin in the mobile version? This is written in pagespeed google! It is possible somehow easy to do or write something without knowledge of php, can you have a code ?!

AO cannot remove unused CSS I’m afraid, but maybe take a look at https://www.ads-software.com/plugins/unusedcss/ (free plugin which uses a premium service) which does just that?

Thank you!))