Foresight.js
DEPRECATED: Prior to recent developments with the picture element, Foresight.js gaves webpages the ability to tell if the user’s device is capable of viewing high-resolution images 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.… http://www.cdnconnect.com/docs/foresightjs
If you’re looking to do something like this you you can check out our webcast with the creator Yoav Weiss or the screencast on responsive images in WordPress.
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 has been 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. By customizing the img src attribute using methods such as URI templates, or finding and replacing values within the URI, it is able to form requests built for your image’s resolution variants. Media queries however, could be used when dealing with CSS background-images, while foresight.js is used to handle inline img elements (or until current web standards are improved). Recently Washington Post implemented foresight.js to determine hi-res/responsive images on their mobile site (when we all know they should have gone down the path of a responsive website).
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
- Minifies to 7K
