How to automaticly generate a black and white version of a picture

Question

I have logo parade in WordPress. All those logo are color RGB. I like the effect that look like. All the logo are b&W and then on hover it become color.

I know how to do it with sprite, but it just double each logo and i have a lot. i know it's possible to "process it" with php or JavaScript to "generate" the b&w version on the fly.

What will be the best way/code to do that ?

js is not really good for it. check this question http://stackoverflow.com/q/562135/1164491 — Cheery, Feb 01 '12 at 20:16
I wouldn't worry about doubling the amount of logos. Grayscale pictures likely compress to nothing. — millimoose, Feb 01 '12 at 20:29

score 2 · Answer 1 · answered Feb 01 '12 at 20:25

If you have a lot of images I would not recommend you to generate grayscale version on the fly. Better to prepare corresponding black and white version for each icon/logo. It's very easy to do for example with ImageMagick:

$ mogrify -channel RGBA -matte -colorspace gray *.png

This will conver all the .png images to the grayscale.

score 2 · Answer 2 · answered Feb 01 '12 at 20:27

2

I have found that perfect solution (by luck) : https://github.com/GianlucaGuarini/jQuery.BlackAndWhite will try all and tell you wich one win, thanks !

answered Feb 01 '12 at 20:27

menardmam

9,860
28
85
113

score 1 · Answer 3 · edited Feb 01 '12 at 20:26

1

Depending on the browsers you want to support, you may be able to do it using CSS filters. However, support for this is not very widespread at the moment.

edited Feb 01 '12 at 20:26

Lightness Races in Orbit

378,754
76
643
1,055

answered Feb 01 '12 at 20:24

Sirko

72,589
19
149
183

score 0 · Accepted Answer · answered Feb 01 '12 at 20:28

0

And that wordpress technique look cool : http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/

answered Feb 01 '12 at 20:28

menardmam

9,860
28
85
113

score 0 · Answer 5 · answered Feb 01 '12 at 21:40

If you want do it for every image, you cane us this formula, using the range [0-255]:

Grayscale value = (0.299*r + 0.587*g + 0.114*b);

where r, g, b represent the red, green and blue values of the input images.

How to automaticly generate a black and white version of a picture

5 Answers5