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.

PhotoShop Image Filter ProcessLet’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 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.

HTML Image Filter ProcessWeb 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 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.

HTML Image Filter Technique Roundup
TechniqueAdvantages & Disadvantages
HTML5 Canvas With JavaScriptClient-side operation of may be slow or blocked.
Proprietary CSS FiltersFast, but lack Internet Explorer support (filters are supported in Microsoft Edge)
GD Library in , or an alternative server-side solution

Reliable, but each conversion means an extra server-side hit.

filters, applied via CSS

Tends to be slower than CSS filters, but cross-compatible among all browsers and platforms.

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