Jump to main navigation, main content

Archived entry | Matt Wilcox .net

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.


skip to comment form
  1. Stephen Neate posted 4 days, 21hrs, 49mins after the entry and said:

    Nice work Matt. Have read over the basics and will find an excuse to try it out shortly and let you know how it goes.

  2. Anthony posted 7 days, 14hrs, 5mins after the entry and said:

    Brilliant! Thanks for the work that went into this! I will start using this right away.

  3. Chris Burbridge posted 14 days, 18hrs, 6mins after the entry and said:

    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?


  4. Matt Wilcox posted 15 days, 7hrs, 53mins after the entry and said:

    Hi Chris,

    You're mistaken on how it works is why smiley icon: smile 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.


  5. mthone posted 26 days, 1hrs, 57mins after the entry and said:

    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?

  6. Miles Carmany posted 26 days, 12hrs, 26mins after the entry and said:


    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"

  7. mthone posted 27 days, 1hrs, 39mins after the entry and said:

    Miles, thanks for that. I'm able to see now that I need to do some trouble shooting. Much appreciated smiley icon: smile

  8. Tom Hermans posted 28 days, 11hrs, 5mins after the entry and said:

    Hi Matt,

    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 smiley icon: wink ) the error:
    Failed to create directory

    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)..

  9. Matt Wilcox posted 29 days, 2hrs, 2mins after the entry and said:

    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?

  10. G01010 posted 29 days, 9hrs, 51mins after the entry and said:

    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?

  11. Matt Wilcox posted 29 days, 22hrs, 13mins after the entry and said:

    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).

  12. G01010 posted 30 days, 4hrs, 6mins after the entry and said:

    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.

  13. Matt Wilcox posted 30 days, 8hrs, 27mins after the entry and said:


    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/

  14. Ben Frain posted 41 days, 6hrs, 23mins after the entry and said:

    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…

  15. Matt Wilcox posted 41 days, 23hrs, 48mins after the entry and said:

    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 smiley icon: smile

  16. Ben Frain posted 43 days, 12hrs, 14mins after the entry and said:

    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

  17. Tony D posted 48 days, 11hrs, 50mins after the entry and said:

    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?

  18. Matt Wilcox posted 49 days, 9hrs, 17mins after the entry and said:

    Thanks Tony smiley icon: smile

    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?

  19. Tobias posted 50 days, 6hrs, 16mins after the entry and said:

    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.


  20. Tobias posted 51 days, 22hrs, 35mins after the entry and said:

    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

  21. Matt Wilcox posted 52 days, 22hrs, 1mins after the entry and said:

    Hi, do you have a link I can look at to poke around?

  22. Filippo Buratti posted 53 days, 11hrs, 23mins after the entry and said:

    Great script, works great!
    But on iOS5 appcache in fullscreen mode seems to take the original image not resized.

  23. Nicky posted 72 days, 0hrs, 7mins after the entry and said:

    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?

  24. Tom posted 164 days, 6hrs, 49mins after the entry and said:

    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?

  25. Johnny5 posted 198 days, 7hrs, 36mins after the entry and said:

    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.

  26. Matt Wilcox posted 199 days, 0hrs, 23mins after the entry and said:


    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 smiley icon: smile

  27. Ingo posted 249 days, 10hrs, 25mins after the entry and said:

    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?


  28. PA posted 291 days, 13hrs, 19mins after the entry and said:

    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

  29. Luke posted 344 days, 14hrs, 22mins after the entry and said:

    Matt, love the concept, but haven't been able to get it going yet. Here is the URL

From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.