Deliver small images to small devices
Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
Why? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. On those devices your desktop-centric images load slowly, cause UI lag, and cost you and your visitors un-necessary bandwidth and money. Adaptive Images fixes that.
.htaccess and adaptive-images.php to your document-root folder.<head> of your site.$resolutions in the PHP file.You're done. Seriously.
* Normally a default with PHP
Large 200Kb 1382px x 778px
Standard 100Kb 992px x 559px
Tablets 70Kb 768px x 443px
Mobiles 30Kb 480px x 271px
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.
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).
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.
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.