Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user’s device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.
Features:
Request hi-res images according to device pixel ratio
Estimates network connection speed prior to requesting an image
Allows existing CSS techniques to control an image’s dimensions within the browser
Implements image-set() CSS to control image resolution variants
Does not make multiple requests for the same image
Javascript library and framework independent (ie: jQuery not required)
Image dimensions set by percents will scale to the parent element’s available width
Default images will load without javascript enabled
