omni-echo
Fork of the hugely popular echo.js that adds responsive image loading
Reason behind the creation of this changes
This project was born out of the necessity to make the American Idol (2014) website to load faster.
Lazy loading on the X axis
Americanidol.com had many carousels in place that made imperative to find a way to lazy load images not only in the y axis but also in the x axis. This wasn't the case back then of what was implemented in echojs.
Responsive images
As it was required the serve optimized images for mobile devices, that were the most of the visitors of the site, so I added a simple way to load different renditions for each image depending on the viewport size.
Performance wins
There were huge performance wins by using this code in tandem with conditional gets, 304 headers. The site went from 10 megabytes initial download down to 1M on desktop, and from 10 megabytes in mobile to 300 kb. These numbers include the whole page load, not only images.
Production tested
This code was served to millions of visitors of high profile sites inside FOX Broadcasting Corporation.