CSS and blurry pictures when scaled down

Question

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.

Answer 1

Remove the crisp-edges and pixelated lines and we are good to go.

Tested on Chrome 61

Final code:

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