CSS3 has some really great, convenient features. One that you may or may not know about is you can convert an image to black and white using only CSS. This is great when you don’t want/need to edit the original image.
.blackandwhite { filter: grayscale(100%); }
<img src="image.jpg" alt="Black and White" class="blackandwhite">
This will work in all modern browsers. But to be compatible with Internet Explorer versions 6-9, you will need to add the following:
.blackandwhite { filter: gray; filter: grayscale(100%); }
Notice that when you hover over it, we set it to go back to full colour.