It sniffs the UA for any device capable of showing HD images and loads the proper image for that device.
It modifies context image requests, specifically the img src attribute, but the server does the image resizing.
The library must be used only for inline images, while for background images, CSS 3 media queries should be used since they're faster and natively implemented.
Here are some key features of "Foresight.js":
· Request hi-res images according to device pixel ratio
· Estimates network connection speed prior to requesting an image
· Does not use device detection through user-agents
· Does not make multiple requests for the same image
· 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
· Minifies down to roughly 6K