Responsive web design puts a new wrinkle into the standard design constraint of using images in your web designs. You need similar images resized to different resolutions, sometimes cropped in slightly different ways and you need as many versions as you have supported break points in your design. On this blog and on www.hendrix.edu we are currently using 4 specific targets (large desktop, notebook/small desktop, tablet, and mobile). This means we multiply the needed file by up to 4 times for each image. Needless to say, this becomes difficult, unwieldly, and time consuming, especially if you are relying on non-power users to supply those images. We are currently using a tool we found on the internet to resolve that issue, the imageresizer asp.net module (http://imageresizing.net/). In their own words:
Work less, do more
Resize, crop, rotate, watermark, and modify images without ever leaving your browser or editor, with a simple API.
- Query string API (all languages)
image.jpg?width=300 - Managed API (.NET and COM languages)
ImageBuilder.Current.Build(source,destination,parameters)
In simple terms, the image resizer is an HttpModule that integrates into the IIS7 web stack and watches for image files. When it sees one with query string values it performs image modifications on it, caches those modifications to disk, and serves the modified bits in place of the original image. In practice its simple but extremly powerful. Oh, and the basic version is free. We purchased the Performance Bundle for the exceptionally reasonable price of $249 to add Disk Caching of the served images for the College website.
What Can it Do
Here are some basic examples from the website.
That's just the most basic stuff, cropping and resizing. Combine that with a jQuery cropping library and you have an online image resizer that can render images to whatever size you desire.
I have to say I love working on web development in a time when tools like this can be plucked from the web with such ease.