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
· 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 6K
Requirements:
· JavaScript enabled on client side