News:

Looking for documentation? Take a look on our wiki

Main Menu

Responsive Images

Started by Aluinet, May 15, 2012, 13:11:20 PM

Previous topic - Next topic

Aluinet

I am using jBootstrap as my template ( 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

Am thinking of using this one - 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.


Beluga

Something to consider:
Media Queries Can't Be Used for Resolution Negotiation 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.