This approach was inspired by Filament Group's experiment, which had some problems. You may like to see a video explaining why adapting <img> 's is so hard.

Because of this Filament's solution is an effort to set-up, and a continuing effort to use. Additionally, Filament's solution is binary - one mobile image, one desktop. I wasn't happy with these issues and so set about trying to solve them.

Filament's version has to have your site built in a specific way to use it. You must manually change the <img> tags to add a pointer to the alternate resolution image. It also requires that multi-resolution images already exist (either the CMS creates them, or you manually upload them).

How is it different?

Adaptive-Images aims to mitigate the problems inherent with Filament Group's method. It is designed to be entirely non-destructive so that it will work with any CMS or even with existing mark-up, without a need to edit anything. It creates and manages its own resized images using your existing images as the source, and it will adapt to the same resolution brackets your site does with the CSS3 @media queries used in your Responsive Design. It can do all of this because it already has the high resolution version to work on (it's the one referenced in the mark-up).

If there's no cookie with the screen resolution stored in it, AI checks the User Agent String: if it finds 'mobile', it will send the lowest resolution defined in $resolutions, otherwise it assumes you're on a large device and delivers the highest.