Check out Adaptive Images

This post is more than 2 years old.

Last week I discovered a pretty interesting project, Adaptive Images. Created by Matt Wilcox, the Adaptive Images project is a PHP based solution for optimizing graphics for different devices. What makes it even more interesting is that it is an entirely passive type system. So for example, you can create a blog post with an image optimized for the desktop, and simply by adding in his code, devices with smaller screens will be fed the smaller more optimized images. This is done making use of .htaccess. Any request for an image (and you can customize where it looks for these images) will be redirected to a PHP script. The script handles resizing images and handles caching very well. On the front end you employ a very small JavaScript snippet (the only change you have to make to the front end) to store the devices size in a cookie.

I thought this was a pretty cool project, so with Matt's permission I went ahead and forked his Github project and rewrote the back end in ColdFusion. You can find this fork here. Matt updated his code very recently so my version is a bit out of date, but it should work for you. Give it a try and let me know.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Steve W posted on 9/6/2011 at 6:07 PM

This looks interesting. If your image file size is not too large and you are using a modern browser you can make them responsive by simply adding :

<style>
img {width:100%;}
</style>

and placing them in a div with a constrained size (max-width; max-height, width). Check out http://www.cfuser.com/cfu/i... and resize your browser (ie 9 and all other non-IE browsers).

Comment 2 by Raymond Camden posted on 9/6/2011 at 6:22 PM

Steve -that sizes the images but does nothing for download times. Check the code out. It actually creates much smaller images (file size wise) which will improve the speed of the page.

Comment 3 by Steve W posted on 9/6/2011 at 6:35 PM

I posted this as a quick fix people may not be aware of and why I said if the image is not too large. This image is 800k and it took my phone 2 seconds with a signal and 18 sec with no bars. Clearly, if you are wanting upload an 8MB file or several 500K files on a single page the responsive css is not a solution and this script would be more appropriate. Since I will probably do this as part of any image upload in my CMS, it would be interesting if you could just change the image path based on viewport changing.

Comment 4 by Tim Garver posted on 9/6/2011 at 6:54 PM

Sounds pretty cool, but what if you cant use .htaccess and mod rewrite?

Tim

Comment 5 by Raymond Camden posted on 9/6/2011 at 7:05 PM

Then you are out of luck. ;) I mean, you could update your HTML to point to a CFM and pass in an image path. The point of this solution though was to remove the need to change your existing HTML content.

Comment 6 by Matt Wilcox posted on 9/6/2011 at 7:52 PM

@Steve W

I'm afraid you're not understanding what's going on and what the CSS you mention actually does. All the CSS does is change the width the image displays as. It adjusts the display of the image, but the image itself doesn't change.

On the Adaptive Images demo site the original image is 800Kb. But that's not what your mobile is getting sent, your mobile is getting sent a server-resized 480px wide 30Kb file. That's the point. It is also using your CSS width trick - but that CSS has nothing at all to do with the file size your mobile gets. If you took Adaptive Images out and relied on your CSS alone, you'd find yourself waiting a LOT longer to see the page.

@Raymond - glad to see you've got the post up, and it's great to see the ColdFusion port! :)

Comment 7 by Matt Wilcox posted on 9/6/2011 at 7:55 PM

There are other drawbacks with using img { width:100% } if the image itself is a lot larger than the mobile device : you hit performance problems due to memory limits and processing power. That's another benefit of using an Adaptive Image type approach. Mobile devices realy need a different image resource delivered, not just the same resolution image which the browser itself then shrinks.

Comment 8 by Steve W posted on 9/6/2011 at 8:02 PM

@Matt

I understand exactly what the css does and doesn't do. If you can't use cookies or don't have the ability to use .htaccess, the css provides a simple solution (assuming you're not loading several large files on your page). Many people are not familiar with some of the responsive design concepts and I thought I would share. That's all.

Comment 9 by Jimmy Devenport posted on 9/6/2011 at 9:27 PM
Comment 10 by Raymond Camden posted on 9/6/2011 at 9:30 PM

Well, you do get that the AI approach doesn't require changes, right? I feel like folks are getting that and to me - it's the biggest selling point.

To be clear, with the AI approach, your "regular" IMG tags are automatically handled by the URL Rewriting+PHP (or CF) script.

Comment 11 by Jimmy Devenport posted on 9/6/2011 at 9:38 PM

OK, I guess an alternative option then - if they don't have the stuff that is required server-side for AI, then src.sencha.io is an alternative. If they have images behind a secure login (i.e. showmemyimage.php?fn=myimage.jpg (and myimage.jpg may be outside of the webroot) then AI comes in mighty handy. I like. For my case, I have a homemade PHP site used by my extended family to view pics - some don't want to join facebook, some have problems with pics being viewable by anyone else, etc. So AI will work for me.

Comment 12 by pwizzard posted on 11/9/2012 at 5:51 PM

Would like to try this out but my hosting is also Windows based. Have spoke to my hosting company and they have suggested using ISAPI instead of .htaccess but haven't said whether it would work, any ideas if this would be possible?

Comment 13 by Raymond Camden posted on 11/9/2012 at 5:57 PM

You should be able to do this in IIS, sure. There is rewrite support for IIS just as good as Apache (although Apache makes it easier imo).

Comment 14 by Chris Bowyer posted on 12/31/2012 at 4:34 PM

Thanks for the work you put into this Ray. Much appreciated!

Comment 15 by Chris Bowyer posted on 1/7/2013 at 11:47 PM

Just to let you know, I got this running out of the box on IIS by simply importing the .htaccess file using URL Rewrite and using the resulting web.config file in the root instead. Here's the web.config version...

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Imported Rule 1">
<match url="\.(jpg|jpeg|gif|png)" ignoreCase="false" />
<!--<conditions logicalGrouping="MatchAll">
<add input="{URL}" pattern="ignore-this-directory" ignoreCase="false" negate="true" />
<add input="{URL}" pattern="and-ignore-this-directory-too" ignoreCase="false" negate="true" />
<add input="{URL}" pattern="assets" ignoreCase="false" negate="true" />
</conditions>-->
<action type="Rewrite" url="adaptive-images.cfm" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Comment 16 by Julian Halliwell posted on 11/28/2013 at 11:37 PM

I've released an alternative version based on Raymond's code:

https://github.com/cfsimpli...

I've been running it on IIS7 and there's an example IIS Rewrite Rule in the ReadMe.

Comment 17 by Marc Funaro posted on 12/10/2013 at 11:08 PM

I set this up originally on IIS6 with IIRF to handle the rewrite rule. It worked for the site we used it on. We started having performance issues during high traffic periods,but assumed it was because our hosting setup at the time was getting dated and we were asking the servers to do more and more.

We just completed an entire hosting service upgrade, and thought the problem was solved... turns out the IIS8 rule i had set up wasn't working as expected, so the adaptive images cfm file was not even being called. As soon as I fixed the rule, the performance problems reappeared, on brand new, much faster servers.

I have narrowed down the problem to the same thing I was seeing on the old servers -- when the rule is active and all image calls in the rewritten-directory are made, the adaptive images cfm file creates multiple instances of the same session. during peak times, our session counts on the server without adaptive-images.cfm run around 300. when I activate the rule and adaptive-images starts doing its thing, it works as expected.. but our duplicated sessions (by ip, as reported in ColdFusion admin) explode into several thousands... 8,10,sometimes 15 sessions per IP hitting the site.

We're using it with CFWheels, but the template itself is being ignored by the CFWheels rule in web.config. I can call it directly in the url and get the "image not found" image that it generates, so I know nothing is interfering with the call created by the web.config rule in the directory the images are requested from...

I've tried adding a CFAPPLICATION tag to the template that matches the main website's cfapplication tag, but this didn't matter. This template seems to cause a "duplicate session memory leak" of some kind, and I'm not quite sure how to solve it. Any ideas?

Until resolved, I'd recommend people use caution when using this on a site that sees any amount of traffic, as you may experience this on both CF8/IIS6 and CF10/IIS8.

Comment 18 by Raymond Camden posted on 12/11/2013 at 12:14 AM

Why not use an Application.cfm with a *different* application name and sessions disabled?

Comment 19 by Marc Funaro posted on 12/11/2013 at 12:35 AM

I assume you mean a CFAPPLICATION tag at the top of the adaptive images file, not a separate application.cfm file that would potentially toy with the cfwheels app, yes? I can try that... hadn't considered it.

Comment 20 by Raymond Camden posted on 12/11/2013 at 12:43 AM

Err, no, I meant in a folder with the adaptive image code by itself. But.... that could work too. ;)

Comment 21 by Marc Funaro posted on 12/11/2013 at 12:58 AM

i could have stored it in the CFWheels "miscellaneous" folder that has it's own blank application.cfc, but for now it remains in the root with a CFAPPLICATION tag added that gives it it's own application name, and turns off session management and client cookies:

<cfapplication name="ai" sessionmanagement="false" setclientcookies="false">

Won't know for sure if this is resolved until tomorrow during peak usage, but it's quick and easy to disable this function if it's still not working.

When it was causing all the extra sessions, they all still had the main application's name. I assume this is because the ai template is in the root directory, and the CFWheels application.cfc was still executing when the IIS rewrite called the ai template. I assume the application named "ai" will not appear in the session monitor, since it's not doing session management now anyway.

This really does belong under miscellaneous; my OCD will probably force me to move it there eventually. ;D