Numerous Pancakes Munched


    0.0.8 • Public • Published


    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


    npm i @lipp/img-min

    DownloadsWeekly Downloads






    Unpacked Size

    10.2 kB

    Total Files


    Last publish


    • lipp