Foresight.js : Viewing high-resolution images like iPad 3

Foresight.js : Viewing high-resolution images like iPad 3

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
  • Does not use device detection through user-agents

Leave a Reply