CSS and blurry pictures when scaled down – Photoshop

When I display a picture to its original size with HTML and CSS, the picture is just perfect (of course).

I expect it to become blurry if I try to display it at a size that is bigger than the original but not if the final size is smaller. And that’s what is happening: my pictures are blurry in all circumstances.

The problem is that the website and the pictures are responsive and I just can’t create a thumbnail for every size possible but I still need the result to be crispy. At least not that blurry.

I searched the web and found this CSS:

image-rendering:-moz-crisp-edges;          /* Firefox        */
image-rendering:-o-crisp-edges;            /* Opera          */
image-rendering:-webkit-optimize-contrast; /* Safari         */
image-rendering:optimize-contrast;         /* CSS3 Proposed  */
image-rendering:crisp-edges;               /* CSS4 Proposed  */
image-rendering:pixelated;                 /* CSS4 Proposed  */
-ms-interpolation-mode:nearest-neighbor;   /* IE8+           */

It works but it gives me the complete opposite: it’s too crispy and artifacts (dots) appear on the pictures.
I tried them all together and separately but with no success. It’s all or nothing.

It’s like you took a decent picture in photoshop and pushed the sharpness slider to its max.
Either way, it’s too extreme to be usable.

I use php, jquery, html, and css
Is there a solution to my rendering problem using one of these?

Thanks.