Adaptive/Responsive Images?

Permalink
What is the community using to replace images on a page with high resolution versions, in the event the browser is on a retina display device, or small versions, in the event the browser is on a portable display of some sort, or both?

bobrocke
 
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
This can be done by using jquery plugins. Below are some useful ones that you may want to consider:

jquery Retina Display Plugin
http://mcilvena.com/articles/jquery-retina/...

foresight.js
https://github.com/adamdbradley/foresight.js...

Conditionizr
http://conditionizr.com/

Retinize.js
https://github.com/MatthewCallis/retinize...

Retina.js
http://retinajs.com/

Retinise.js
https://github.com/dahliacreative/retinise.js...

Hope that helps!
bobrocke replied on at Permalink Reply
bobrocke
Thanks.

I've used a couple of those in the past and they replace an image with a high resolution image if they detect a retina class display.

But if they find a 600x600 image, they replace it at 600x600. I'm looking for something that ALSO knows about screen size so that it might deliver that same image as a 400x400 high revolution image if it finds an iPhone screen, for example.

Bob
lwduk replied on at Permalink Reply
You may want to look at this addon? http://www.concrete5.org/marketplace/addons/picturefill-image/...
I haven't used it personally but this may be an easier option?