Practical Responsive Images
Responsive Websites need Responsive Images
Batch Static Workflows

Now that we are on the path to needing to support much more complex image variations, how do we go about preparing, managing and serving them?

One option is by using local/desktop workflows to more efficiently create the multitude of variations of size, compression, dpi and even crop-to-point-of-interest that you may now need for every one of the images across your site.

I've found some of these options can work well:

  1. - Photoshop (server) with ExtendScript
  2. - Adobe Bridge, bulk actions
  3. - Bash script utilising ImageMagick
  4. - JPEGmini acting on a folder a time

If we can be sure that there are a small number of variations needed, then this might be a feasible approach, however it also relies on expecting very little or no changes to the way that your website will be consumed in the future. Otherwise even relatively small changes like applying greater image compression across all category/lister images in order to compensate for performance concerns, or provide higher definition assets due to the release of newer, even higher definition devices, can start to inhibit our options.

From a maintenance and flexibility standpoint, for even a relatively small site with just a few hundred images, these challenges, can very quickly become restrictions on the flexibility you can afford your website, and restrict your ability to adapt your content to changing device and technology ecosystems.

Dynamic Imaging Fundamentals

The most fundamental aspect of a typical Dynamic Imaging System is that it operates against a single high resolution master asset, from which image variants with different shapes, sizes, compression levels, sharpening, and even crops, are dynamically generated at request time, and which are typically then served via a resilient and globally scalable Content Delivery Network.

Typically these images are simply requested via an HTTP/S request, with image manipulations controlled via querystring parameters, such as
?width=300px
?quality=70%
?crop=x,y,width,height

and which can be combinated in a single request
?width=300px&quality=70%&.....

One key consideration when considering Server Side Solutions, is whether to setup your own, or use one of the available SaaS solutions. There are quite a few variables to consider here, including the necessary uptime of what is likely to be a business critical service, scalability, and ongoing maintenance and support.

Other Benefits / Considerations

Search Engine Optimisation: With some Dynamic Imaging Systems it is possible to form image requests for 'apparent filenames' where those filenames are decoupled from the actual filename of the original asset.
For example, img001.jpg might actually be requested via the apparent filename leather-bag.jpg

This can have considerable SEO benefits, as it means that you set the apparent file name based on the context of the website (perhaps a different language) rather than the workflow undertaken by the photography studio, and can potentially drive the apparent image request with a similar workflow that your SEO mechanism might drive your Alt tags. More has been written about this here : Image SEO & Dynamic Imaging Systems

I have written an introduction to Dynamic Images on my blog