I am using jBootstrap as my template ( http://www.prieco.com/es/jbootstrap/get-jbootstrap.html (http://www.prieco.com/es/jbootstrap/get-jbootstrap.html) ) to get a responsive site. However I need to be able to serve up different resolution images for different devices.
Does anyone have any experience in which is the best system to use? There is a good list of methods here: https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 (https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0)
Am thinking of using this one - http://adaptive-images.com (http://adaptive-images.com) as it appears easy to implement. The only problem is that it defaults to hi-res images if javascript is off.
Something to consider:
Media Queries Can't Be Used for Resolution Negotiation (http://www.xanthir.com/blog/b4Hv0) Or, why any Responsive Images solution based solely on MQs is doomed to failure.
QuoteGood, user-friendly behavior for deciding which resolution to send depends on several factors, which are difficult to get right. One of the major considerations, bandwidth, is variable, which means you can flip from "high" to "low" within a page load, You don't want to throw away the "high" images and request the "low" ones in this case (as that's ridiculous and user-hostile) but that's precisely what using Media Queries would require.