Making a large image smaller using CSS (downscaling) results in blurry images in IE9, FF, but fine in Chrome

Question

I'm using the following css to display a 661px x 343px image:

width: 95px; height:auto;

I have found that using the following CSS will give the same blurriness in Chrome:

image-rendering:-webkit-optimize-contrast;

So deleting the above makes the image much clearer in chrome, any idea how to fix the problem for the other browsers?

Answer 1

Generally you shouldn't do this, reason being is the user will download the larger image.

Imagine you have a 2Mb image you want to show on a website, the user would have to download the 2Mb file just to view the smaller image. It is best practice to resize the image and create a thumbnail link.

As for the issue it is the browser rendering that is the issue, As far as I know there is no alternative to this.

Answer 2

resize the source image to the correct width and height, then you won't have any issues displaying it across browsers