Examples
Examples
Basic Usage
The Image preloads and displays an image asset and provides the same basic functionality as the native HTML img .
Preview Image
To improve the user experience, an Image can display a preview while waiting for the high-resolution image to be loaded.
Best Practices:
- Image previews should be a down-scaled version of the actual high-res image. It's common to provide an image that is 10% of its original size.
- To ensure meaningful content is shown as fast as possible without any additional network requests, preview images should be provided as base64 encoded data URIs.
Responsiveness and Performance
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.
Adaptive Sizing
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:
- Specify a specific size for the Image directly or make it adapt to a container's dimension by setting its height to 100%
Listen to Resize Events
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.
Radius
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.
Fit
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').