3 ms·
Foresight.js vs. Retian.js vs. Retina.js
Has anybody got any experience using Retina JS and/or Foresight JS?
Apologise for my lack of understanding but I'm unsure of the difference and therefore unsure which one is the better choice for delivering the appropriate image.
From my little understanding Foresight will deliver a different image based on screen size whilst Retina will deliver @2x images to retina screens.
Does this sound right? Is using both good practice?
Additionally are Foresight and Picturefill.js?
- richbradshaw 12y agoThe best answer is to use srcset (supported in Chrome 34+, Firefox 32+, Safari 8+ and Opera 22+) with a polyfill (or not, depending on your point of view) for older browsers. Srcset lets you swap out images based on screen dimensions and the device's pixel ratio (e.g. @2x/@3x etc). An example would be: <img src="normal.png" srcset="smaller_than_600px_wide.png 600w, smaller_than_600px_wide@2x.png 600w 2x" alt=""> This would use normal.png in older browsers, then use smaller_than_600px_wide.png on screens with a width of less than 600px, and smaller_than_600px_wide@2x on those screens where the devicePixelRatio == 2. It's smart enough to only request the images that are needed - on a high DPI small screen only the last image would be requested. A polyfill won't be as efficient, which may cause problems depending on how you are using it.
- rnichaelt 12y agoThanks for the reply. Does your suggestion respond to screen size as well as pixel ratio? This site: http://sanscolour.com/ http://sanscolour.com/ calls a different image depending on the browser size. Mobile it calls small.jpg, for laptops it calls medium.jpg and for monitors it calls large.jpg. I'm pretty sure they're using Foresight.js to call the appropriate image.