img-min - Vaadin Add-on Directory
A responsive, lazy, microservice/CDN backed image web-component
# ``
[](https://www.webcomponents.org/element/lipp/img-min)
`` is a zero dependency vanilla web-component / custom element which can help you and your users to save a lot of bandwidth. It lazy loads minimal responsive images with auto-thumbnail and cool dissolve effect inspired by Medium.
For more info and a live demo checkout [img-min.now.sh](https://img-min.now.sh) or start playing with the [codepen.io](https://codepen.io/lipp/pen/Rqerbq).
- **Responsive**: considers actual onscreen size and dpi
- **Lazy loading**: oly load images when they are/get visible
- **WebP**: Prefer WebP over JPEG when supported
- **Dissolve effect**: Cool effect for preview/highres transition
- **Every CDN**: Works with every CDN
- **Tiny**: No deps, less than 2kb
## Installation
Add `
```
Or serve / inline yourself:
```
npm i @lipp/img-min
...
```
## Usage
### Properties
The following properties / attributes are supported:
| Property | Decription |
| ---------------- | ----------------------------------------------------- |
| `src` (required) | The url to the highres version of your image |
| `quality` | The quality to use for resizing (0 - 100), default 50 |
| `alt` | The familiar img `alt` attribute |
### CSS custom properties
| Property | Decription |
| -------------- | --------------------------------------------------- |
| --aspect-ratio | The aspect ratio (width/height) to use, e.g. `16/9` |
To make lazy loading work optimal, the `` should have a (responsive)
height. You can either do it yourself, or use the CSS custom property
`--aspect-ratio` for your `` tags. You can use CSS, inline style or
JS to set the respective value. You can use the original image's width/height as
`--aspect-ratio`.
### Your custom CDN
The `` uses a free CDN backed resizer. You can use your own by providing a `window.ImgMin.getCDNUrl` function:
```js
window.ImgMin.getCDNUrl = ({
width, // width on screen
height, // height on screen
url, // original high-res image url (src attr)
quality, // quality setting for the respective image
format // "jpeg" or "webp"
}) => {
// for the cloudimg.io service, this makes sense
return `https://.cloudimg.io/width/${Math.floor(
(60 / quality) * width
)}/n/${url}`
}
```
## Examples
```html