Loading images Faster in Webpage

Question

In the web application when i click on a link that should load an image from server, it is taking too much time since the images are sized approxmately 3MB - 5 MB, we are un

Answer 1

See Dear follow this url: Website Performance Checker

paste your domain name or url and test your site, then find your image link and click on it right click save and uploaded it again. Your image file size will be auto reduced but the image quality will be perfect.

Answer 2

You could go for a solution like google did (still does), with mobile browsing, where you basically setup a proxy, which can

• Gzip it (on the proxy)
• use other protocols (spdy eg)

Here is the data compression google did:

Otherwise if you cant change the image, and you cant reduce the quality in any way, and if you cannot change the server, (and the suggested javascript liberays does not suffice), then it sounds like you dont have any choice. However since you only specifed it should be done in under 5 secounds (which roughly translates to a 10 mbit download for the wiki example), then either you have too many images, or the required internet speed is very low.

Answer 3

1. Try to compress the size of your images as big images took time to upload.
2. Use jpg/jpeg files or zip files to upload.

Answer 4

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:

[js]
$(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);
});
});[/js]

Done :D

Answer 5

Try loading images when document loads by utilizing background-image property of a container element ; set container element display:none . This should cache images in browser , eliminating need for additional requests to server for images at time of actual click - image already loaded into document , cached in browser before first click on "link" or button. On click of "link", or button , toggle display property of container element having id same as className of clicked button between "block" , "none" ; displaying , not displaying image , at each click of "link" button .

var buttons = document.querySelectorAll("button[class^=img]");

Array.prototype.slice.call(buttons)
.forEach(function(elem, index) {
  document.getElementById(elem.className)
  .style.display = "none";
  elem.onclick = function(e) {
    var img = document.getElementById(elem.className);
    img.style.display = (img.style.display === "none") ? "block" : "none";
  };
});

body {
  width: 1800px;
  height: 1600px;
}
div[id^="img"] {
  width: 100%;
  height: 100%;
  position: relative;
}
div[id="img-1"] {
  background-image: url(http://lorempixel.com/1800/1600/cats);
}
div[id="img-2"] {
  background-image: url(http://lorempixel.com/1800/1600/technics);
}

<button class="img-1">image 1</button>
<button class="img-2">image 2</button>
<div id="img-1">
</div>
<div id="img-2">
</div>

Answer 6

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