Making my background images load faster

http://www.leona-anderson.com

body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}

I have a different Background images on each site an since they are 1080p they take a bit to load.

I use wordpress 4.0.5 with minamaze theme.

I have found out that my use a preload javascript function, but in my case on the frontpage I do not have information about the background image of the other sites so I am hoping someone could provide me with a different solution.

My images are .pngs with round about 1mb size, maybe I also could try to compress them some more?

Thanks in advance

Answer

You shouldn’t use .png for such an image. As a general rule, photographs should be .jpg and graphics (eg. logos) should be indexed .png

I reduced the file size by ~93% down to 89KB from 1.3MB and the visual difference is barely noticeable.

Here’s the optimized image: Optimized

And here’s yours: Original