CSS/JS/PS - Best way to desaturate multiple images

Question

I am working on a portfolio site which will have desaturated thumbnails of all my work and when you hover over it, the colour fades in and out when you hover out.

As this page will have alot of thumbnails, i was thinking of the best way to achieve this effect.

What I thought of so far is:

B/W and Colour versions of each thumbnail (cons: lots of bandwidth)
B/W and Colour in same image as sprites (pros: less server connection requests, cons: lots of bandwidth)
Use Javascript to on-the-fly generate desaturated copies of each loaded image (cons: alot of processing power?)

They are the only ones I can think of, can anyone help me figure out what way of achieving what I need is the most efficient? Other suggestions from the ones listed are more then welcome. What I am looking for is:

Lowest bandwidth use
Fast and not laggy

Thanks

If you're willing to use SVG you can create filters that might help. — david, Jun 17 '11 at 16:48
I need it to be as cross browser as possible, hopefully with IE6 aswell, but IE7+ is more important. Would SVG work with them? and would it be fast? — Ozzy, Jun 17 '11 at 16:49
I'm not sure sorry, I haven't tested old browsers for a while. Chances are you will end up having to use B/W images if you want ie6 support. You might have trouble with the fading too, I don't think ie6 supports semi transparency. At least not without some serious hacks. — david, Jun 17 '11 at 16:53

score 2 · Answer 1 · answered Jun 17 '11 at 16:52

2

A very simple way to achieve this is to give the img a hover state and apply opacity.

img {opacity:0.5;}
img:hover {opacity:1;}

http://jsfiddle.net/jasongennaro/KV4c8/1/

It's not exactly black & white, but it does give a similar effect. There is no bandwidth addition and it is fast.

answered Jun 17 '11 at 16:52

Jason Gennaro

34,535
8
65
86

Ehh... That's not actually "desaturated", though. As IE is typically the issue, there is a proprietary [filter](http://msdn.microsoft.com/en-us/library/bb554281%28v=vs.85%29.aspx), and use SVG/CANVAS where available (http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css) or the CSS filter property. – Jared Farrish Jun 17 '11 at 17:22
Agreed @Jared. As the OP said other suggestions are welcome, I thought I would give one. ;-) – Jason Gennaro Jun 19 '11 at 00:19

Jared Farrish · Accepted Answer · 2011-06-17T17:15:35.760

1

You can use the Pixastic plugin:

http://www.pixastic.com/lib/docs/#iesupport

This claims that the desaturate method works in IE.

NOTE: I checked this particular example in IE using quirks mode (which simulates IE 5.5), and it works.

http://www.pixastic.com/lib/docs/actions/desaturate/

edited Jun 17 '11 at 17:15

answered Jun 17 '11 at 16:53

Jared Farrish

48,585
17
95
104

score 0 · Answer 3 · edited May 23 '17 at 11:48

Similar questions : Convert an image to grayscale in HTML/CSS and How do you convert a color image to black/white using Javascript?

However, for a simple solution and for a fadeIn/fadeOut effect... use 2 images (or images as sprite).

Put the B&W under the one in color (position:absolute) and do some jquery...

$('img.over').mouseover({function(){
   $(this).fadeOut(slow);
});
$('img.over').mouseout({function(){
   $(this).fadeIn(slow);
});

CSS/JS/PS - Best way to desaturate multiple images

3 Answers3