img-min | Vaadin

A responsive, lazy, microservice/CDN backed image web-component


Published on

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

  • 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


Add <script> at the top of your page:

<script src="" ></script>

Or serve / inline yourself:

npm i @lipp/img-min



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 <img-min> should have a (responsive) height. You can either do it yourself, or use the CSS custom property --aspect-ratio for your <img-min> 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 <img-min> uses a free CDN backed resizer. You can use your own by providing a window.ImgMin.getCDNUrl function:

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 service, this makes sense
  return `https://<YOUR-TOKEN>${Math.floor(
    (60 / quality) * width


<div style="width: 100%;">
    alt="Hero image"
    style="--aspect-ratio: 1189/792;"

Copyright and License


Link to this version
ImportedReleased 06 December 2018MIT License
Framework Support
Browser Independent
Install with
npm install @lipp/img-min"@0.0.8"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.8