AntiModerate – a great progressive image loading library

Jett La Rue created a nice library that reduces the loading time of a page to < 1sec on slow connections. It loads and renders nicely blurred micro images on the page while loading full sized images in background which replace as they finish. The library is optimized and with gzip it’s < 2kb.

The author was happy to tell us the story behind this unique project. Here it is:

The case was slow website loading. Previously I have had good success with optimizing websites by fixing their images to be lower quality as a tradeoff for site speed. The issue with images is that when they take a while to load, the page repeatedly fucks up the layout and/or useful context images are hard to differentiate from filler. My thought process extended towards people with even shittier internet: “imagine if this took two minutes to load instead of my mere 20 seconds”.

• Let’s solve this.
• Let’s show blurred micro-images prior to the real image loading, just like the background image trend.
• Let’s make them inline so there is no latency added.
• Let’s have minimal additional page size due to this.

The way to solve this was to create an library that is quick and easy to insert, has no downsides if not supported for whatever reason (no-js, old browser, etc), looks great, quick rendering for under-powered devices, and a very small footprint. I decided to use the StackBlur algorithm as this fits the criteria of being quite fast and has very good blur results- it is indistinguishable to my untrained eye from Gaussian blur yet about seven times faster.

Here comes AntiModerate. It took two days of developing to create the first working version, and then a few more for tweaks and such. Initially there was little interest because I only told a few friends. As soon as I added it to reddit’s webdev forum it generated a fair bit of interest which is quite nice, getting shared on multiple web design websites and shared on twitter a bunch. I hope it can grow from here and help to improve the www experience overall, especially with today’s high resolution (and filesize) pictures that permeate the net.