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

I would normally optimise the image using Grunt or an online tool such as Tiny PNG to reduce the file size.

Then you could choose to defer the loading of the images, I found the following article helpful when it came to defering images - https://www.feedthebot.com/pagespeed/defer-images.html

The article discusses using a base64 image for the initial loading and then defering the loading of the high quality image. The image mark up mentioned in the article is as follows...

The JavaScript mentioned in the article is as follows...

I hope this helps.