Skip to content
This repository has been archived by the owner on Sep 8, 2019. It is now read-only.
/ img Public archive

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

Notifications You must be signed in to change notification settings

hydecorp/img

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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 🖼💨

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

— Addy Osmani (@addyosmani) September 6, 2019

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.

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published