foresight.js – Handle High Resolution Images

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

  • Request hi-res images according to device pixel ratio
  • Estimates network connection speed prior to requesting an image
  • Does not use device detection through user-agents
  • Does not make multiple requests for the same image
  • Javascript library and framework independent (ie: jQuery not required)
  • Cross-browser and cross-platform
  • Image dimensions set by percents will scale to the parent element’s available width and device pixel ratio
  • Fully customizable through global configuration options and individual img attributes
  • Default images will load without javascript enabled
  • Minifies down to roughly 5K