Adaptive Images

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.

Features

  • Works on your existing site
  • Requires no mark-up changes
  • Device agnostic
  • Mobile-first philosophy
  • Easy & powerful customisations
  • Up and running within minutes

See more features

Set-up

  • Add .htaccess and adaptive-images.php to your document-root folder.
  • Add one line of JavaScript into the <head> of your site.
  • Add your CSS Media Query values into $resolutions in the PHP file.

You're done. Seriously.

Requirements

  • Apache2 / nginx
  • PHP 5.x
  • GD lib *

* Normally a default with PHP

Example in action

Hat-tips

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.

Why is this different?

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.

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.