Avoid blurry images when scaling down with CSS

Scaling up images makes them blurry right?

True, but everyone knows that! Problem is that if you scale an image with CSS down, it could become blurry too, and is really annoying.

How to fix it? Just add these rules to the target img

image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit */
-ms-interpolation-mode: nearest-neighbor;