8

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.

Community
  • 1
  • 1
Baylock
  • 1,246
  • 4
  • 25
  • 49
  • Do you know the exact sizes you want to scale up / down to when you display your pages or will it be dynamic resizing of high res images? – Derik Nel May 26 '14 at 12:22
  • it's responsive so, no, I don't. It could be anything. – Baylock May 26 '14 at 17:10
  • I am also having this issue, here's a fiddle - http://jsfiddle.net/ygutz4wm/1/. Pretty keen to solve this one! – LiveSource Nov 13 '14 at 00:39
  • Yes, sill wanting to know if there's a solution – Baylock Nov 24 '14 at 08:31
  • Does this answer your question? [Image downscaling with CSS … Images are blurry in several Browsers](https://stackoverflow.com/questions/25061087/image-downscaling-with-css-images-are-blurry-in-several-browsers) – T J May 07 '21 at 11:25

2 Answers2

2

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+           */
AlbertSamuel
  • 584
  • 10
  • 33
-1

I am not sure if you have tried using image srcset or image-set with your images. There is a good article which made me rethink my images and it works on keeping them sharp for me. I have also started using svg for my icons, logos, and other images. I hope it helps you out.

dreamweaver
  • 195
  • 11