@hydecorp/img v1.0.0-alpha.2

hy-img

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

Deprecation

Replacing img tags with arbitrary web components --- even with a noscript fallback --- had negative side effects, such as images not showing in reader views, etc.

This component is now deprecated in favor of a standards-based approach using loading="lazy" and setting width and height on img tags in conjunction with setting the CSS property aspect-ratio: attr(width) / attr(height).

For more see below:

Post-mortem

hy-img was born out of dissatisfaction with existing lazy loading techniques, specifically the lack of cancellation of requests for images that went out of view again. This was especially useful for users on ultra-slow connections. Whether this is supported in the future is up to browser implementations of loading="lazy". The techniques used in the component had many downsides too,required an additional server-side step, and most notably broke images in Safari and Firefox reader views and likely other user agents too.