Adaptive Images
I’m pleased to say that I’ve taken an earlier idea further and now have a fairly well tested and production-ready solution to the problem of creating and supplying device-sized embedded images dynamically.
Adaptive Images is live and provides an example of the technique in action and downloadable files for you to use. If you’re technical and so inclined you can also track the project over at GitHub.
What is it?
It’s a way of shrinking the images in your HTML so that you’re not wasting bandwidth sending images taller and wider than the person viewing your site would ever need. The extreme example is someone using a phone to view your site - they only need a 480px wide image so there’s no point in sending them a 1920px wide one. Adaptive Images fixes this for you, it consists of two files and a bit of javascript which then watches out for what size device a visitor is using, takes your existing image, shrinks it down, stores it cached on the server ready for anyone else on a similar device, and then sends that smaller one instead of the original. You don’t have to do anything at all once you’ve done the initial 5 minute set up. You can use it on any CMS or even on a flat HTML page. Once it’s on there, forget about it.
How to use it
This will work on any site, but I have built it with the specific intention of coupling it with CSS Responsive Designs and Fluid Image techniques. Both of which are great, and I think Adaptive Images complements them well.
Why the name change?
Two reasons: firstly to help differentiate this solution from a similar one by Filament Group. Secondly because it’s actually more appropriate. Filament Groups solution is more “responsive” in that it only serves up existing images (and you need to write the HTML to take advantage of that). Mine actually adapts your existing images as well as responding to device size, and doesn’t need any special mark-up or naming convention.
Entry Information
- Posted:
- Sat, 27th Aug 2011 at 10:08 UTC
- Filed under:
- Tags:
Comments
skip to comment formNice work Matt. Have read over the basics and will find an excuse to try it out shortly and let you know how it goes.
Brilliant! Thanks for the work that went into this! I will start using this right away.
This is such a great idea, and very nice site for it. But I don't see it working … ? I go to adaptive-images.com, and resize the window and refresh, and then re-download the image at different widths; but it is always the same size. What am I missing?
Thanks.
Hi Chris,
It doesn't go from the size of the browser, it works off the size of the device's screen (in pixels). The reason it does this is because of caching issues you'd get otherwise. If it went on browser size it would send small resolution images which the browser then caches. Visit a few pages and then maximise the browser and you'd find all of the images would be too small. And with no way of knowing whether to re-requesting them. That's why Adaptive Images goes on device size and not window size.
You're mistaken on how it works is why
-Matt
This is a wonderful project and I thank you for creating it. I am wondering how to tell if I've installed it correctly. I think I did, and I loaded the site on my ipod touch. I think it loads faster but I don't know how to compare it. Do you have any advice on how to verify if I've installed it correctly?
@mthone
If hold down on an image, your iPhone will give you an option to save image or copy. Select copy, go to the address bar and paste. It will load the image directly, and in the title bar it will say "imagename.png 127x446 pixels"
Miles, thanks for that. I'm able to see now that I need to do some trouble shooting. Much appreciated
Hi Matt,
) the error:
great idea when I read about it and spent this evening fiddling around with it. Somehow I can't get it to work..
I see (barely.. on my phone
Failed to create directory
/srv/www/mydomain.tld/public_html//ai-cache/320//test/ada/img
The order of those folders isn't right..
I put the 'demo'-site (some html with a few large 800x800 images) in a folder "test/ada"..
have been looking around for a solution to post this here instead, but haven't found the error (yet)..
Hi Tom,
I think it's because Adaptive Images expects to be in the root directory of your website, and by the looks of what you've got for paths - it isn't in your case. You've set up a "test" site inside a subdirectory of your existing site instead of on a sub-domain?
Thanks for this project. Regarding your comment, number 4 above, does that mean you've used a different method on the demo page - as the images there scale on browser resize?
Hi G01010,
Yep, slightly different methods. The original idea was to have it request image resolutions according to browser size. But you hit big problems with browser cache if the user ever maximises the window - so I had to change tactic. The final project adapts based on the size of the devices screen, not the size of the browser window. For mobile devices this is the same thing (generally).
Thanks for your reply. So the way that the image resizes when you resize the browser on the project page isn't available for download? Have I understood correctly?
Thanks again.
@G01010
Ah, you're talking about "Fluid Images" which is a very simple bit of CSS - the crux of it is this:
img { max-width : 100%; }
You can read up more about it over at Ethan Marcotte's blog: http://unstoppablerobotninja.com/entry/fluid-images/
Hi Matt, just a quick one, is it easy to adapt this so that it could work on only particular sub-folders of a site. For example, if a blog section of a site www.mysite.com/blog needed to be responsive and get the adaptive images but not www.mysite.com/ didn't? Had a quick attempt at merely tweaking the path value in the JavaScript (and putting the relevant adaptive image files in the root of the sub-folder) but that didn't seem to work…
Hi Ben,
It's very easy - you need to edit the .htaccess file. By default it applies to all folders *except* one's listed in there. To make it work on no folders except the ones in there, simply remove the exclamation mark at the start of the line with the path
Hi Matt, I'm limited in my .htaccess editing skills but even I should have figured that out! Thanks anyway, will give it a whirl…
Cheers - Ben
Hi Matt, it never ceases to amaze me with the generosity of guys like you who weave their magic and then release it to the rest of us. Thanks a lot.
I can't get it to work though, as soon as I drop the htaccess file onto my server no pictures are displayed at all - anywhere.
Any ideas?
Thanks
Tony
Thanks Tony
Sounds like the .htaccess file is working but you've not got the file in the root directory of your website. What's your set-up?
Hi Matt, thanks for this nice piece of work.
I can't get it to work either:
All files are in the root of my webspace.
I test the code with an image inside a normal html-file which lies in the root of my webserver.
The .htaccess file seems to work (when I alter the "!assets" path I get no pictures at all). GD Lib and PHP 5.x is installed and tested. "ai-cache" is writeable but no images appear in there. When I check the site on my iphone or ipad I get the same highres picture as on my screen.
Any help would be great.
Thanks
Tobias
Hi Matt,
in addition to my earlier post:
I think the adaptive-images.php file is not executed. I get no error messages at all.
The "Responsive Images" project from the "filament group"- which you mention on your website - works fine on my server with no additional settings.
Anyway I would prefer your solution because of the nice automatic image rendering.
Best regards
Tobias
Hi, do you have a link I can look at to poke around?
Great script, works great!
But on iOS5 appcache in fullscreen mode seems to take the original image not resized.
Hi Matt, I have the exact same issue as Tobias. The PHP file doesn't seem to be executed and nothing is written to ai-cache. I am using this in a subdomain/subdirectory - e.g staging.mysite.com, with my files in public_html/staging/mysite. Do I need to adjust the htaccess file to get this to work in a subdomain?
Hi Matt, this is fantastic, thanks! Everything works, but only after creating all directories manually (inside ai-cache), and setting permissions to 777 on each folder (including ai-cache). Otherwise I get directory and image failure messages. Have you any ideas as to why this might be?
Very cool indeed.
Am wondering why you don't use window.innerWidth/Height as opposed to screen.width/height. The former is great at times when your browser window does not take up the full page, and is easier to test as well. It wasn't until I resized my VM host screen that I realized why my images weren't resizing.
@Johnny5
Because of browser caches. If you are on a large device and browse a site with the browser not taking up the whole screen, and the JS was using innerHeight, then you'd be sent images to fit the browser, not the window. So you'd browse around, it'd cache those images - and then if you ever went full screen all the images would be too small. With no way to know that the cache is wrong and needs emptying. Which is why it goes on device size, not window size
Hi, great stuff. Works fine for me. Just one thing,. I use the following resolutions: 960, 768, 480, 320
960 and 480 will generate very fast. 768 and 320 will generate sometimes never. The images will displayed an all pc/devices. I load the page on PC, iPad and iPhone.
What can I do?
Thanks
This is great. I tried on PC, ipad and on iphone. On desktop and iphone it worked but on ipad I get bigger images. Please help
Thanks
Matt, love the concept, but haven't been able to get it going yet. Here is the URL http://103.6.28.43/~unitec/