Loading images Faster in Webpage

Use HTTP Cache Header for your images . Once loaded images will not reload before cache expiration as defined by HTTP Cache Header.

There are a couple of solutions to explore for managing large images:

Try to bring down file size (3-5MB is too high IMHO):

• Remove all metadata
• Reduce resolution/pixel-density
• Reduce height/width of the image
• Use JPEG compression
• Use GZIP compression on your server

You can also explore:

• Use a CDN to serve images (to allow parallel loading)
• Use services like Cloudinary/IMGIX which allow you to dynamically select the image size you want

How it works We’re going to remove the images from the HTML, then put them back in using jQuery. Simple as that. This will allow the images to load after all of your other content has finished

PLUS, there’s an important added benefit: search-engines measure your page-load speed by what’s in your HTML, not what jQuery loads after the fact. That means that when Google measures your site’s loading speed, the page speed result will look significantly better. This is how to do it:

Firstly: Remove all of the big images from your HTML (my images just happened to be in an unordered list): Remove all of the big images from your HTML

Secondly: Add a jQuery snippet that will add them back into the HTML, after everything else on the page has loaded:

$(window).load(function(){ // This runs when the window has loaded
    var img = $("").attr('src', 'YourImagePath/img.jpg').load(function() {
        $("#a1").append(img);
        // When the image has loaded, stick it in a div
    });
    var img2 = $("").attr('src', 'YourImagePath/img2.jpg').load(function() {
        $("#a2").append(img2);
    });
});

Done :D