hy-img is a image tag drop-in replacement that lazy-loads TODO
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:
Native <img> lazy-loading is coming to the web! https://t.co/LgF7F1iMgR <img loading=lazy> defers offscreen images until the user scrolls near them. Shipping in Chrome ~75 https://t.co/4gR7lvx4zx pic.twitter.com/luCHEfLkKD
— Addy Osmani (@addyosmani) April 7, 2019
Chrome is implementing a change to avoid layout jank during image loading 🖼💨
— Addy Osmani (@addyosmani) September 6, 2019
This calculates aspect ratio using width/height attributes
(to size images using/CSS) before they have fully loaded. Already in Firefox 🦊https://t.co/6GpCeyGPm9 ty @jensimmons & CSSWG! pic.twitter.com/I1fhWv0Jqy
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.