| CARVIEW |
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
Set-up
- Add
.htaccessandadaptive-images.phpto your document-root folder. - Add one line of JavaScript into the
<head>of your site. - Add your CSS Media Query values into
$resolutionsin the PHP file.
You're done. Seriously.
Requirements
- Apache2 / nginx
- PHP 5.x
- GD lib *
* Normally a default with PHP
Example in action
Photo credit: "Creepy Lane", Matt Wilcox
Original: 850Kb 1900px x 1069px
-
Large 200Kb 1382px x 778px
-
Standard 100Kb 992px x 559px
-
Tablets 70Kb 768px x 443px
-
Mobiles 30Kb 480px x 271px
More examples
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.
Footnotes
Adaptive Images by Matt Wilcox is licensed under a Creative Commons Attribution 3.0 Unported License.
You may be interested in versions of Adaptive Images for other technologies, have a look at the download page for more information.
Got feedback? Please get in touch: The GitHub project, E-mail, or Tweet me @responsiveimg. Cheers :)
You could also check out my aging and much-in-need-of-a-redesign personal website: mattwilcox.net.