CloudinaryImage

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.

Installation

npm install cloudinaryimage

Usage

<cloudinary-image
  base="https://res.cloudinary.com/<your-cloud-name>/image/upload/"
  imageid="<your-image-id>"
  alt="Your alt text"
></cloudinary-image>

Attributes

| 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 | |

Styling

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;
}

License

MIT

Author

Werner Glinka