I'm pretty surprised about the amount of people I talk to who believe that images not seen on a page are never loaded. Browsers are clever these days, they tell me. If an image is below the fold on a mobile device, it's not downloaded. That's simply not true.
If a tree falls in a forest... Images are a big problem in the developing world. When we load too many images, we are not only making our sites slower, but we are inflicting large data charges for the people that use our sites. We have a responsibility. The Barack Obama article on English Wikipedia has over one hundred images on the page. These image requests compete for network requests for render-blocking resources that can impact the first paint. We need to do something!
Right now you'll need Chrome to make use of this part of the Service Workers API, but our friends in Mozilla are working on it and it's only a matter of time before it lands there too. As web developers we have a responsibility to adopt things to speed up and help prioritise their implementation in browsers. Remember what happened when geolocation and other friends became cool? You'll also need HTTPS - this is a requirement of a Service Worker.
I work for the Wikimedia Foundation. Right now I'm interested in how this can be used to improve the Wikipedia experience on 2G connections. Early investigations show 2G connections take fifty seconds to load Barack Obama! Just by lazy loading images using this Service Worker, we reckon we can get that down to twenty seconds. We don't plan on stopping there, though -- we have plans to get it down below the fifteen second mark.
An alternative to HTML parsing is to simply hijack image requests. To do this instead of rewriting your HTML with regular expressions you simply check whether the request is for a file in the image directory and intercept it. The downside of this is right now there is no way to tell the type of the request, so this means if you try and access the image resources outside the page and the ServiceWorker intercepts you'll have to hard refresh to overcome the ServiceWorker. I played around with this idea and was able to block image requests on a certain query string parameter.
alt="any requests with the sw=true parameter would be returned by the Service Worker">
alt="A requests for an image without the sw=true parameter would return the transparent gif">
Feedback welcomed on my Twitter post or any of the Phabricator projects linked above. We're an open source project, so come help us make this happen! :-)
I remain your humble and obedient servant.