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 unable to reduce the size because of the image resolution problem.

There is one solution to put height and width, but we are unable to put height and width for the image. How can we resolve it?

I am loading the images from server into div like

<div>   <img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Srtm_ramp2.world.21600x10800.jpg"/>  </div>

Answer 1

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