We have just seen that W3C is working hard to set a standard to tag the picture as soon as possible, which will enable you to provide visual contents that are more appropriate for the device you are using to view our site.
Because of the great necessity of this functionality, the community has created two JavaScript plugins leading to the expected result accepted by most used browsers. They are Foresight and Picturefill.
Foresight provides web pages the ability to inform whether a user device is capable of viewing high-resolution images (such as retina display devices), before the image has been requested from the server.
Additionally, Foresight judges if the user device currently has a fast enough network connection for high-resolution images. Depending on the device display and the network connectivity, foresight.js will request the appropriate image for the webpage...