Load a low-res background image first, then a high-res one

A bit late, but you can use this extremely simple solution: You can put the two images in the css background:

  background-image: url("high-res.jpg"),url("low-res.jpg");

The browser will display the low-res image fist, then display the high-res over the low-res when it has been loaded.

Let's try a basic one :

<img border="0" 
     style="background:url(http://i.stack.imgur.com/zWfJ5.jpg) no-repeat; 
            width:1920px;
            height:1200px"
     src="http://i.stack.imgur.com/XOYra.jpg" width="1920" height="1200" />

zWfJ5.jpg is the low-resolution version, and XOYra.jpg is the high-resolution version.

If there is a way to arrange the loading so the background-image displays first, this could be the simplest i can think of.

where low resolution 44k:

and high resolution is 1.16M

result :

jsFiddled here ( this needs a bigger image for loading comparison. )