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

Question

I am trying to optimize the size of my site when it is being outputted to the client. I am down to 1.9MB and 29KB when caching. The issue is that the first load contains an

Answer 1

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.