<p>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)?</p>

<p>My context is that I have rows in a table that all have buttons in the right most cell and some rows need to look lighter than others. So I can make the font lighter easily of course but I'd also like to make the images lighter without having to manage two versions of each image.</p>

Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a
```
<div>
```
overlay and set that to be gray (change the alpha to get the effect).
html:
```
```
<div id="wrapper">
    <img id="myImage" src="something.jpg" />
</div>
```
```
css:
```
```
#myImage {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

/* or */

#wrapper {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
    background-color: #000;
}
```
```