# @wernerglinka/cloudinaryimage

> Lazy load images from Cloudinary

Latest version **1.2.0** (published 2023-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wernerglinka/cloudinaryimage
pnpm add @wernerglinka/cloudinaryimage
yarn add @wernerglinka/cloudinaryimage
bun add @wernerglinka/cloudinaryimage
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-08-11 |
| First published | 2023-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | werner@glinka.co |
| Maintainers | wernerglinka |
| Keywords | web component, cloudinary, progressive image loading |

## Links

- npm: https://www.npmjs.com/package/@wernerglinka/cloudinaryimage
- Repository: https://github.com/wernerglinka/cloudinaryImage
- Homepage: https://github.com/wernerglinka/cloudinaryImage#readme
- Issues: https://github.com/wernerglinka/cloudinaryImage/issues
- npm.io page: https://npm.io/package/@wernerglinka/cloudinaryimage

## Dependencies (2)

- [prettier](https://npm.io/package/prettier.md) ^3.0.0
- [light-server](https://npm.io/package/light-server.md) ^2.9.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2023-08-11
- 1.1.4 — 2023-08-10
- 1.1.3 — 2023-08-08
- 1.1.2 — 2023-07-19

## README

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

[![npm: version][npm-badge]][npm-url]
[![license: ISC][license-badge]][license-url]

## Installation
```bash
npm install cloudinaryimage
```
## Usage
```html
<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:
  ```css
  cloudinary-image {
    --image-height: 100vh;
  }
  ```

  ## License
  [MIT](https://github.com/wernerglinka/cloudinaryImage/blob/main/LICENSE)

  ## Author
  [Werner Glinka](werner@glinka.co)

[npm-badge]: https://img.shields.io/npm/v/@wernerglinka/cloudinaryimage.svg
[npm-url]: https://www.npmjs.com/package/@wernerglinka/cloudinaryimage
[license-badge]: https://img.shields.io/github/license/wernerglinka/cloudinaryImage
[license-url]: LICENSE

---
_Source: https://npm.io/package/@wernerglinka/cloudinaryimage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._