We all know why it is important that all of our images are optimized for the web: it is to help ensure that our website loads fast enough giving it a high performance rating, which in turn results in a higher page rank by Google.

But then there are cases when it’s preferable view the images in high-res. Wouldn’t it be better if we have an easy way to do so?

That’s where Foresight.js comes in – a JavaScript library that gives webpages the ability to detect the user’s device and check if it is capable of viewing high-resolution images like with the newest gadgets, before sending out the request for the image to the server.

Of course, resizing images on the server is nothing new but another option for doing this is always welcome. Foresight.js is developed by Adam Bradley and you can check out the demo here.