demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Introduction to HTML Image Filtration Methods

css / filters

Estimated reading time: 2 minutes, 19 seconds

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.

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 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.

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 and 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 Roundup
HTML Image Filter TechniqueAdvantages & Disadvantages
HTML5 Canvas With JavaScript

Requires an HTML5-compatible browser; client-side operation of JavaScript may be slow or blocked.

Proprietary CSS Filters

Fast, but only supported in particular browser versions (primarily Webkit at the moment).

GD Library in , or an alternative server-side solution

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

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 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.