Image component improvments

[samiresua]

I'm noticing some layout shift with images loading (using the ootb image component)

• Are there plans to add width/ height attributes to the element to prevent this?
• Are there also plans to include a loading="lazy" option for the image component too?
• Are there plans to be able to swap out the src at different breakpoints?

[samiresua]

Also, i wonder if auto be a more sensible default height for images (currently appears to be 100%) ?

This would avoid this sort of image stretching to occur over columns?

[elylucas]

You can currently set the height and width of the image from the design section, which will stop the layout shifts from happening.

We are currently working on adding the loading attribute to the image component, expect that soon.

For the height auto/100% question, I wasn't able to reproduce the stretching you have in your screenshot. Could you share how you got that with having the height of the image set to 100%?

[sami616]

Hi there, this is a column component, rich text on the right, with image in the left. If the right hand columns height exceeds the left the stretching occurs - setting the image height to auto resolves this.

[sami616]

With regards to the layout shift, sometimes you want a fluid responsive image (ie - width: 100%) with the width and height attributes still set on the element. This should remove layout shift for responsive images too.

[primeinteger]

Hey @sami616, we've recently made updates to help improve these problems for relative height/width images and other elements. Could you please upgrade your app to the latest Experiences SDK version and let us know if you're still having these issues? Thanks!