No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


npm version

hy-img is a image tag drop-in replacement that lazy-loads TODO



hy-img is Open Source but not free.

You may use the component in accordance with the GPL-3.0 license, but this means you must be willing to release your code under a GPLv3-compatible license in turn.

For cases were this is not acceptable the following commercial licenses available:

Personal Startup Enterprise
# Developers 2 15
License Personal Startup Enterprise
Price $29 $249 $499
Buy{:.gumroad-button} Buy{:.gumroad-button} Buy{:.gumroad-button}


hy-img can be used in a variety of ways:

Web Component

The Web Component is the preferred way of using hy-img, but requires support in the browser or a polyfill. There are multiple ways of including it on your page:

Bundled ES6 Module

This is the version that is going to have native support across all major browsers the soonest.

<script type="module" href=""></script>

<hy-img src="..." srcset="..." width="800" height="600">
  <noscript><img src="..." srcset="..." /></noscript>
  <div slot="loading" hidden><!-- ... --></div>

HTML Import

Some browsers have decided against implementing HTML Imports, but they are easily polyfilled.

<link rel="import" href="">

<hy-img src="..." srcset="..." width="800" height="600">
  <noscript><img src="..." srcset="..." /></noscript>
  <div slot="loading" hidden><!-- ... --></div>

Unbundled ES6 Module (experimental)

When loading the component form the unpkg CDN, you can import the source directly by appending the ?module query parameter.

<script type="module" src=""></script>

<hy-img src="..." srcset="..." width="800" height="600">
  <noscript><img src="..." srcset="..." /></noscript>
  <div slot="loading" hidden><!-- ... --></div>

Note that this approach will result in hundreds of separate HTTP requests (one for each module) and is intended for testing and prototypes only. Importing unbundled ES6 modules is much slower than bundled distributions and will remain so for the foreseeable future.

One advantage of this approach is that shared dependencies will not be included twice when using more than one component from the Hydejack component family. However, setting up webpack is a better solution in these cases:


You can use hy-img with a frontend bundler like webpack or rollup. Just install the component with npm or yarn and import the source in your code:

import 'hy-img/src/webcomponent/module';

If you want to have control over when the custom element gets defined, you can also import the HTMLElement like so:

import { HyImageElement } from 'hy-img/src/webcomponent';
// ...
customElements.define('hy-img', HyImageElement);

Note that all of hy-img's dependencies are valid ES6 modules, so that they can be inlined with webpack's ModuleConcatenationPlugin.