Gray out image with CSS?

Question

What\'s the best way (if any) to make an image appear \"grayed out\" with CSS (i.e., without loading a separate, grayed out version of the image)?

My context is that

Answer 1

Better to support all the browsers:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}