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).

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.