CODEWITHSUNDEEP
css
Lawrence DeSouza
Lawrence DeSouza

Reputation: 1027

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

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?

Upvotes: 5

Views: 4842

Answers (2)

David Nguyen
David Nguyen

Reputation: 8528

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

Upvotes: 1

Neo
Neo

Reputation: 2395

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.

Upvotes: 5

Related Questions