CSS and blurry images while reducing

Question

When I display an image with its original size using HTML and CSS, the image is just perfect (of course).

I expect it to become blurry if I try to display it a size that is larger than the original, but not if the final size is smaller. And what happens: my paintings are blurry under any circumstances.

The problem is that the website and images are responsive, and I just can't create a thumbnail for any size possible, but I still need a result that will be crisp. At least it's not vague.

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 exact opposite: too crispy and artifacts (dots) appear on the images. I tried them all together and separately, but without success. This is all or nothing.

It’s as if you made a decent picture in Photoshop and pushed the sharpness slider to the maximum. In any case, it is too extreme to be usable.

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

Thanks.

Answer 1

Delete the crisp-edges and pixelated lines and we will be happy.

Tested on Chrome 61

End 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+ */ 

Answer 2

I'm not sure if you tried to use the srcset image or the image with your images. There is a good article that made me rethink my images and it works to make them sharp for me. I also started using svg for my badges, logos and other images. Hope this helps you.