As we head towards next month’s 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 to create two seperate files:
Even with batch processing, this takes time and effort, especially in file organization; 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 page load times.
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 in other articles. 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 options as to how 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||Advantages & Disadvantages|
|Proprietary CSS Filters|
Fast, but only supported in particular browser versions (primarily Webkit at the moment).
|GD Library in PHP, or an alternative server-side solution|
Reliable, but each conversion means an extra server-side hit.
|SVG filters, applied via CSS|
Requires an up-to-date browser, 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. In the immediate future I will be showing how to use SVG filters, as they have the greatest current cross-browser compatibility; understanding them also leads to comprehension of the proposed CSS3 filter effects. CSS3 filters are almost a direct descendant of the techniques used in SVG; familiarity with the latter will speed your understanding of the former as they become standardized and supported.