A Web Component for Lazy Loading a Cloudinary Image
The CloudinaryImage component uses progressive image loading, e.g., display a low-resolution image initially and then replace it with a high-resolution image once it becomes visible in the viewport. To achieve this, the component uses the Intersection Observer API to detect when it is in the viewport. The component will also ensure that the image maintains its aspect ratio and is styled with the appropriate CSS to prevent layout shifts.
npm install cloudinaryimage<cloudinary-image
base="https://res.cloudinary.com/<your-cloud-name>/image/upload/"
imageid="<your-image-id>"
alt="Your alt text"
></cloudinary-image>| Attribute | Description | Type | Default |
|---|---|---|---|
| base | The base URL for your Cloudinary account | String | |
| imageid | The image ID for your image | String | |
| alt | The alt text for your image | String |
The component exposes the following CSS Custom Properties for styling:
| Property | Description | Default |
|---|---|---|
| --image-height | The height of the image | 100% |
The component will fill the available width. To control the height, you can set the --image-height CSS Custom Property. To cover the whole viewport for example:
cloudinary-image {
--image-height: 100vh;
}