Progressive loading of high DPI photos

I spent an evening adding 'progressive' loading of the title images to my blog.

The title images for this blog are 3840 × 2160 and a hefty ~650K each. That's entirely intentional; as a photographer I wanted them to look as sharp as possible and take advantage of high pixel density screens.

The only downside of hi-res photos is that even with a good internet connection, you can still see the photo loading as the browser reads the JPEG. It's visually jarring and way too reminiscent of the web, circa 2000s.

A reasonable solution is to first download a smaller lower-resolution version, then load the full resolution image on top of that. So the user sees something relatively quickly, without the visual contrast of an image loading on a blank background.

JPEG images natively support something very similar; if you save your photo as a progressive JPEG, you will get a pixelated image that gradually gets more detailed as the browser reads the file. Personally, I don't like the visual effect of progressive JPEGs. They may be an improvement over displaying a line at a time, but the initial pixelation is not visually pleasing.

This blog implements an alternative method of progressive loading of photos. For each title photo there is a 1920 × 1080 version that is only around 70K or so. This smaller version of the photo is heavily blurred with a gaussian blur filter by Moya Tech Blog. The blurred image gives a good impression of what the full image will look like, without obvious pixelation (and conveniently blurred photos compress really well in comparison to the non-blurred original).

Here's an example of one of the blurred preview photos:

© 2016 Will McGugan Blurred preview of a hi-res photo

This blurred photo is absolutely positioned directly behind the title image, so that when the hi-res version loads it covers the blurred image. There is also a CSS transition to smoothly fade in the hi-res version, further reducing any visual interruption.

All in all, it works quite well. Technically, it will increase page-load time since it serves an extra image, but from the visitor's point of view, the page will appear to load significantly quicker.

If you are reading this via a feed, you might want to go directly to my blog and click around the links at the top to see the effect in action.

Update: You may have noticed I added an animation effect to the background which looks kind of like a camera focussing when combined with the blur. I'd be the first to admit I may have gone overboard with that; I may yet regret learning how to do CSS transitions...