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 image which is very unoptimized for mobile devices; it has a 1080p resolution.

So I am looking for a method that allows me to first load a low-res version (min.bg.jpg) and once the site has loaded, use a high-res version - or even one with a resolution close to the device being used (NNNxNNN.bg.jpg or just bg.jpg).

The background is set using CSS just like everyone would expect. Its applied to the body and the entire statement looks like this:

body {     background: url("/cdn/theme/images/bg.jpg");     color: white;     height: 100%;     width: 100%;     background-repeat: no-repeat;     background-position: 50% 50%;     background-attachment: fixed; } 

Now, I want to change that to use min.bg.jpg instead for the first load, and then something like this:

jQuery(function(){     jQuery("body").[...] }); 

Which way do I go on asynchronously downloading the new background, and then inserting it as the new CSS background image?

To show some differences, here is an example of the main and mini version I am using for testing:

[email protected] ~/Work/BIRD3/cdn/theme/images $ file *.jpg bg.jpg:     JPEG image data, EXIF standard min.bg.jpg: JPEG image data, JFIF standard 1.01 [email protected] ~/Work/BIRD3/cdn/theme/images $ du -h *.jpg 1,0M    bg.jpg 620K    min.bg.jpg 

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.

Answer 2

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. )