The Image preloads and displays an image asset and provides the same basic functionality as the native HTML img .

To improve the user experience, an Image can display a preview while waiting for the high-resolution image to be loaded.

Best Practices:

A great way to balance client-side performance and responsive images is by using srcset in conjunction with sizes and loading attributes. Read more about responsive image best practices here: Image

Note: The srcset attribute depends on the image attribute being set.

By default, the Image always takes the available width and calculates its height based on the image that is displayed.

But it can adapt to any size when a different dimension is specified while ensuring that the image asset displayed covers the available space.

Best Practices:

When initially mounting to the DOM and whenever the Image changes its dimensions, it emits a resize event including the current width and height.

A common use case is to update the image asset to make it perfectly fit the available space.

The radius property controls the border-radius of the featured image, preview image, and fallback image. It accepts preset values like 'none,' 'small,' 'medium,' 'large,' or 'full.'

Note: The CSS custom property --cosmos-image-border-radius will override the radius property when set.

The fit property defines how the image should be resized to fit its container. It either scales and crops the image to fill the container ('cover') or scales it to fit within the container while preserving its aspect ratio ('contain').