Image component improvments

contentful / experience-builder

https://www.contentful.com/developers/docs/experiences/what-are-experiences/

MIT License

6 stars 1 forks source link

Image component improvments #538

Open samiresua opened 5 months ago

samiresua commented 5 months ago

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 commented 5 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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.