Foresight.js was originally introduced when the first iPad with Retina display was announced in 2012. It helped solve the problem of providing the optimal image for the device, with the goal to decrease image loading time, and to not waste bandwidth.
Since then however, the picture element has been working its way through the standards and is actively being implemented by browsers. It's recommended to use picture element polyfill, rather than this out-dated solution.
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.
Foresight's methods centralizes how to configure image variants across your entire site (compared to hard-coding each image variant's src and its dimensions into markup on every page), and specifically uses a hybrid implementation of the new CSS image-set() function.
This project's overall goal is to tackle these current issues faced by web developers designing for hi-res: Challenges for High-Resolution Images. Foresight.js aims at providing a lightweight, cross-browser and framework independent tool for a high-resolution web on today's browsers.
For a small set of CSS classnames to help keep images cropped on the focal point check out Focal Point.
- 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
Contact Me
- Focal Point: A small set of CSS classnames to help keep images cropped on the focal point for responsive designs
- Safari 6 and Chrome 21 add image-set to support retina images
- Using CSS to control image variants
- Responsive Images Community Group
- Adaptive Image Element
- Polyfilling picture without the overhead
- The image-set() function (for responsive images)
- URI Template: RFC 6570
Copyright (c) 2012 Adam Bradley
Licensed under the MIT license.