Foresight.js – A JavaScript Library For Handling Responsive Images Smartly

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. It modifies context image requests, specifically img src attribute, but the server does the image resizing. Media queries however should 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).  The features of Foresight.js are:

• Request hi-res images according to device pixel ratio
• Detect network connection speed
• 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

Requirements: None
Demo: http://foresightjs.appspot.com/demos/index.html
License: Free

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Your Email Address

Trending Posts On Functionn This Week

Share:

Other Interesting Resources: