Directory

img-min - Vaadin Add-on Directory

A responsive, lazy, microservice/CDN backed image web-component img-min - Vaadin Add-on Directory
# `` [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](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
``` ## Copyright and License - Licensed under MIT - Created by [Gerhard Preuss](https://github.com/lipp)
View on NPM
View on GitHub

img-min version 0.0.1
### Dependencies

img-min version 0.0.2
### Dependencies

img-min version 0.0.3
### Dependencies

img-min version 0.0.4
### Dependencies

img-min version 0.0.5
### Dependencies

img-min version 0.0.6
### Dependencies

img-min version 0.0.7
### Dependencies

img-min version 0.0.8
### Dependencies