Skip to content

Instantly share code, notes, and snippets.

View zakius's full-sized avatar

zakius zakius

View GitHub Profile
@fabiosantoscode
fabiosantoscode / readme.md
Last active November 6, 2018 09:44
A new, no-javascript, accessible and performant way to implement lazy loading of images on the web

img[lazy]

This is a proposal to extend HTML to provide a new way to implement lazy-loading images on the web.

Motivation

The ever-growing mass of mobile devices, with tiny screens and limited processing power, are unable to access the web at decent speeds and reasonable prices. Old browsers die hard, and it gets harder and harder to cater to their every need. It is very, very hard, as a web developer, to cater to both mobile browsers and ancient browsers, especially when it comes to those problems which cannot ever have a permanent, one-size-fix-all solution: sticky headers, footers that don't float awkwardly when there's not enough content on the page, and lazyly loaded images. Sticky headers are getting their permanent, one-size-fix-all solution through the position:sticky proposal. Footers are slowly being replaced with taller footers, and infinite scroll, which is a growing trend, makes them disappear from designers' canvases. A problem that's not truly solved is lazy-loaded images.

Lazy-loadin