I am currently utilizing LazySizes for lazy loading images on my website. While I am working with Bootstrap as the foundation for my HTML and CSS, I am encountering an issue. I am struggling to ensure that the space around the image is maintained while the image loads in. This results in the image appearing to fill in the space between the surrounding text. It's almost like how a regular image would load on the page without lazyloading, with the space around it being preserved during the loading process.
Despite attempting various solutions such as specifying the width and height, adding width specification to the data-srcset, modifying the HTML of the image, and utilizing data-sizes="auto", I have not been successful in resolving this issue. My next course of action involves considering a CSS customization to preserve the space occupied by the image before it fully loads. However, I am curious if there might be a more effective approach to tackle this challenge.