Symphony.

Wanted to share a responsive technology that I've been working on.
It wouldn't have been possible without this amazing community. Thanks!

Give it a try at
http://responsimage.com

Nice script, I suppose your site is build with Symphony CMS?

Responsive images are a tricky thing for sure. Different contexts require different solutions. The one I've been working on is an art gallery/blog where the primary reason for visiting the site is to see nice images in a nice layout, whatever the device. But what works for art images doesn't work well for logos, icons, etc.

I haven't gone through your solution in detail yet, but I did notice some funkiness that wouldn't work for my needs.

When the browser is resized or reoriented, your example image is resized/stretched to its container, but it doesn't keep its aspect ratio, something that would seem to be important for most images. Maybe you have a solution for that, but it's not clear from the description on your site.

Here's what I see in detail:

Desktop

• Page loads full screen, oddly cropped image at full width. no distortion
• Resize browser to 50% or so, same image but stretched along x-axis to fit new container width, container/image height the same as before. distortion
• Browser widened to 75% or so, new image resized and recropped for previous container (screen?) size (new width, same height), stretched along x-axis to fit new container width. distortion
• Each additional browser resize seems to get a new image fit for the browser's previous dimensions. This works slightly better if you are going from small to larger screen sizes since you don't get pixelation.

Android Phone

• Page loads portrait, image is squished along x-axis to fit screen. distortion
• Orientation flipped to landscape, image is stretched along x-axis to fit screen distortion
• Re-orienting doesn't seem to load a different image, and neither is resized nicely.
• No loading animation.

What scenarios do you imagine your example serving?

@BBQbrains

You are right, the site doesn't communicate its usefullness well. Bottom line, it works this way.

1. Upload a high res image
2. Whatever width or height you set it to be, it will genetate that image on the fly and serve it.
3. If you are on a high-res display, it will server up an image 2x size and make it look right for retina display.
4. If you make changes to the width and/or height, it will autmatically swap to the new asset.
5. Also, since it defers the load, it will show a load animation for better UX

I've made several updates, maybe check it out now?

I'm working on a site that has responsimage baked in at http://72.10.33.203/ - makes the logo look awesome on retina!

Once you take a closer look into it, I'd love your help on making the site communicate its strengths better. Feel free to email me kirk@strobeck.com if you'd like. Smashing Mag has an expiriment counter-part and they recently tweeted it, I want everyone on board this solution, because it takes away ALL the responsive headaches! :)