We have the Page Speed Image Optimizer module installed and running on our production instance.

Our homepage banners load responsively with <source media="..." srcset="..."> elements inside a <picture> element for each banner, and an <img> element with the default image being the desktop version, the <source> elements are for the mobile and tablet versions.

After installing, setting up the module, and generating the webp images, the module switches the <img> element with a new <picture> containing the webp versions, with mobile and tablet breakpoints, but all of them use a resized desktop version.

I've been testing different configs in the module but none of them seem to work with the different images for mobile and tablet.

Whenever I enable Lazy Loading and/or User Agent for Loading, the module just doesn't work and the images display as if the module was fully disabled (HTML like the first image). 

Here are the configs we're actually using, which give the result seen in the second image:

Custom image replaces are all OFF and Lazy Load module is also 100% OFF.

Is there any config or any modification I can make in our theme so that the module works as we expect?