As I head towards another NMPD showcase, a number of my students are finishing up portfolios that feature photographs, art and design works with rollover effects: changing an image from greyscale to color, for example. I have discussed gallery techniques in the past, so that is not my concern here: rather, it is the efficacy of the workflow process in creating the alternate versions of those images.

Let’s take the standard process. Say we need two states for an image: full color and greyscale. The traditional approach is to take the picture through PhotoShop creating two seperate files.

Even with batch processing, this takes time and effort; in addition, the code to swap one image for the other in the page can be somewhat complex. Finally, there is the fact that each extra image we load into our page is a separate HTTP request, slowing down our site.

Web technologies now give us the ability to alter images on the fly. Rather than creating separate image files, we retain just one source image, and use a process to covert it to whatever appearance we need when the image is requested on a page.

The same approach has been used in the various CSS and SVG masking techniques I’ve demonstrated elsewhere. This is merely the next logical step: the ability to display any version of an image we like on a web page, without needing to touch PhotoShop.

There are several possible ways to achieve this process. All of them share the same goals: eliminating redundancy, creating adaptable code and content, speeding page loads, and freeing your time.

There is no “right” or “wrong” solution, only the most appropriate for the context: the best answer will often be a combination of techniques.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.