Add Picture element and Lazysizes

I would like to see the picture element added so support for Webp could be added in as a optional download using the picture element.

And since its not all about optimization and file size, I would like to see Lazysizes implemented. Delaying download of images is wise below the fold. In order for it to work though, the developers would need to disable the transparent image in the srcset so one could see the images in Bootstrap Studio. Probably would need to figure out how to add the cache busting to the data-srcset that stroes the information to be loaded into the srcset when activated.

I can use Lazysizes now by setting the srcset to another name like lazy-srcset but I have to use search and replace to rename them all before export or publishing.

Which I might as well request....Macros for the program ?

Thank you for the suggestion! The picture element has been on our todo for a while. We will be able to work on this in one of the Bootstrap Studio 5.x updates.

Chrome (not sure about other browsers) has had support for lazy loading images for a few months. You can activate it by enabling "Lazy loading" in the sidebar. Maybe this can help in your case?

Thank-you for your reply Martin.

Really all I need for any of the lazy loaders out there to work is to be able to turn off the srcset when designing since the optimum way to lazyload is to use a standard image for the src and then a transparent 1x1 image for the srcset. This retains the src to be indexed by spiders and lets the srcset block the download of the src until a data-srcset can be loaded when the image breaks the defined threshold below the fold. (data-srcset replaces the srcset)

Unfortunately, when designing in Bootstrap Studio the srcset is chosen of course (like it should) over the src so you see none of your images.

If there just was a switch on a image that would "disable" the srcset somehow from viewing in Bootstrap Studio only, this would then be a great feature ! Currently I name the srcset "lazy-srcset" which then lets the src show. Then on publish or export I use the awesome "find and replace" and search for lazy-srcset and relplace all with srcset. Once published or exported I just undo my change.

This would leave it open to use any lazy library we would like, as long as the src and srcset format is followed.

Just to followup on adding the transparent 1x1 image for srcset. By creating a python script that parses the html on export using beautifulsoup 4, I am able to search for all the images that have the class "lazyload" and add the attribute srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==".

This now gives me total design freedom inside Bootstrap Studio to see and edit freely all the images and then add the srcset on exporting my project to accomplish proper lazy loading format.