Just wondering if anyone has experimented with creating responsive images in SS with technique similar to http://adaptive-images.com/

I figure since SS already deals with image resize shouldn't be a big deal to create methods that create multiple resized images with a modified setWidth() and then modify the htaccess to serve those images based on User Agent and/or a JavaScript set cookie.

My big worry is server load to do multiple resizes of multiple images on the first render. I figure it would be impossible on shared hosting as it would hit common memory caps quite quickly. And if you want to support iPad retina graphics you're screwed you'll be uploading relatively massive files. Obviously, if you wanted to handle CSS images the same way, they'd have to be manually resized

Thoughts? Criticisms?

I'll post the code if I get this up and running

Will do.

As an aside, I really think serving images to the new iPad will really need to be handled as a user option. Not sure sending full resolution image by default to a user over 3G / LTE is a good idea

I actually did have a working version, but I realized from a temaplting perspective it created some pretty hairy notation. You'd need to specify values for each of your breakpoints in the template. Such as Image.SetWidth(1000, 500, 250). That's not bad with SetWidth and SetHeight, but onced you moved into any of the two value operations it just became impossible to read, the other option was settign defaults which might not work for every template.

Since this is in many ways a front end issue I abbandoned it in favour of using JavaScript polyfill for one of new HTML5 responsive image notations and using seperate image functions for each breakpoint version.

The added template markup is easier to read for a beginner than any viable modified image method syntax

I'm happy to post the work I had done in git if you're interested

Adaptive-Images is great for site wide image shrinking, but I was thinking in terms of providing much more granular control to the front end coder. Really great responsive websites don't just scale and drop columns at different screen sizes, they also provide images formatted for context. Say for instance you have a square image on your desktop site as a thumbnail, on a vertical mobile device that image may work better as a wider image spanning the entire column width. I was attempting to bridge that gap.

I'll try and dig up my solution and post it later today.