As shown in the screenshot above using WPVivid’s Image Optimization WebP feature generates the image in this way where a <picture> tag’s <source>'s srcset attribute is converted to data-srcset which does not render the images. This causes the WebP images not to load as data-srcset is not valid.
After some help from the WPVivid team, they realise that the problem lies from Bricks parent theme file at includes/frontend.php at line 573, as shown in the screenshot below:
data-srcset is set for lazyloading purpose (image is not loaded until appearing in window viewport).
It should be reverted to srcset before image enters viewport, though.
The problem is the image is already above the fold on page load, so shouldn’t it automatically revert to srcset? Perhaps I might be doing something wrong here on the Bricks settings?
Images above the fold do not get excluded from lazy loading automatically. You have to add a loading attribute of eager to images above the fold that should not be lazy loaded.
The thing is, even if image is above the fold, lazy loading should load it in the end.
Of course it’s better to exclude it from lazyload with loading="eager" so that it is loaded faster and doesn’t impact Cumulative Layout Shift, but I guess there’s still a problem somewhere.
