Just a thought though!

We are using responsive images at globo.com.

We have four different versions for each image:

a) A low quality (between 4-5x smaller than original) to serve in the page mark-up.
b) A ‘desktop’ full quality image
c) A ‘tablet’ full quality image (smartly cropped using facial recognition)
d) A ‘smartphone’ full quality image (smartly cropped using facial recognition)

We put each URL (other than low quality) in the markup as data-x-url:

<img 
    alt="something"
    src="low-quality-url"
    data-url-smart="smart-url"
    data-url-tablet="tablet-url"
    data-url-desktop="desktop-url">

The process we use is that we monitor the page scroll and change the low quality image to the high quality one for the given device only when the user “approaches” the image.

It has worked quite well for us and we are very happy with the results. Our website handles almost 2bi page views / mo with 30-40 responsive images at any given time.

The tool we use for handling the sampling and cropping of the images was built by us and has been released as open source (https://github.com/globocom/thumbor/wiki).

Cheers,
Bernardo Heynemann
Tech Lead @ globo.com

I agree 110%. Some devs tend to forget that they’re not only designing for different devices and screen sizes, but also for different PEOPLE (this one being the largest single variable ). Successful design marries functionality with aesthetics, and gives each of them equal importance (for a good example of this, see Apple’s industrial design). If you ignore functionality (or give it less importance), then you’re branching over into the realm of fine art instead of design (and last I checked, fine art is not readily accessible to everyone – you need to understand it before you can access it. Not too intuitive an approach for UI design). The accessibility thing is very personal for me as well, as I have three special needs kids who benefit from it every day.

The longer I do this web dev thing the more I realize that it doesn’t really matter how pretty a site is if it doesn’t work for the user.

Full disclosure – I have a son who is lost most of his usable vision at the age of 15, he is 19 now. While semantics mattered to me before it is a primary objective in my work now.

The vision impaired community is a lot bigger than you realize.

Trisha
5/21/2012

Because we have already started working and user’s are already getting their device friendly browsing experiences with Responsive Web. So we should get start with what we have now and gradually upgrade ourself before we fix our mind with one dedicated solution.

I am using Foresight.js and it’s quite better.

But I would really love a solution for this like CSS Media Query as David Hund said.