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 or start playing with the codepen.io.

- 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

$3

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 |

$3

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

$3

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