Dynamic image resizing in the Cloud for Responsive website

I have a responsive (RWD) website which works OK on mobile devices. My problem is that pictures are sort of "heavy" on smartphones and uselessly large on older phones. I know there are plenty of tools either offline or online (such as: http://www.resizeyourimage.com/) to resize pictures and I know I could roll my own image resizer with GD and the like (PHP here), but I was wondering if someone here is aware of a way to have images automatically resized. For example by piping them through a proxy of some kind, such as:

http://cloudservice/w_320/http://myserver/mypic.jpg" />

A free service highly preferrable.

This way I wouldn't have to retrofit old pictures nor is it necessary to provide multiple versions of the same picture.

I hope my question makes sense...

You should check out WURFL Image Tailor. Works pretty much as you describe. You refer the images through a proxy like this:

    <img src="//wit.wurfl.io/[full-url-to-your-image]">

The proxy will then detect the screen size of the user-agent and resize the image accordingly. This service also take some arguments that allows you to explicitly set height, width and percentage of screen size.

Lilith River

There are many such services, and a similar question has been asked before.

All reliable solutions will also requires a tiny bit of client-side javascript. Cookies don't work on the first page load (which is most of them), and sniffing gives useless data if you're doing RWD with breakpoints. Excepting slimmage (and solutions with <noscript> tags), most will download 2 copies of each image (or worse, fail accessibility and SEO requirements).

I favor the DRY & CSS-friendly Slimmage.js, as its author, but there is also Picturefill for those who want art direction support (and are willing to handle the resulting markup complexity). Both can be used with any RIAPI-compliant server-side module, such as ImageResizer (disclaimer of authorship applies here too).

If you have access to a Windows (or linux/mono) server, consider self-hosting.

Dynamic imaging SaaS products appear and fail on a regular basis, so have a backup plan in place to replace the URLs if your SaaS isn't RIAPI-compliant. If your HTML isn't dynamic or can't be post-processed, you're going to have... fun.

A few services (free or in beta):