CODEWITHSUNDEEP
cssimageinternet-explorer
coure2011
coure2011

Reputation: 42474

how to improve resized image quality in Internet explore 9/10 and FF

The image quality is disturbed when I resize the image. here is the code

<img height="60px" src="http://www.clker.com/cliparts/8/3/3/4/1195445190322000997molumen_red_round_error_warning_icon.svg.med.png" alt="logo" />

how to improve it in IE and FF? http://jsfiddle.net/CdktR/1/

Upvotes: 0

Views: 1129

Answers (2)

MassivePenguin
MassivePenguin

Reputation: 3711

Resizing in the browser is notoriously unreliable (although some browsers, like Chrome, handle this better than others). You can affect it slightly by adding this to your CSS:

img { -ms-interpolation-mode: bicubic; -moz-image-rendering: crisp-edges; }

But by far the best option is to supply the webpage with a version of the image that's suitably sized. It's a pain if you want to update the image later on, as you'll need to update multiple files, but the only other option I can think of is to use SVGs.

You can check browser support for SVGs here; the short version is unless you're targeting IE8 and below, you should be OK.

Upvotes: 1

Michael McLaughlin
Michael McLaughlin

Reputation: 605

mozilla has some pretty good stuff regarding this topic. you probably want to use image-rendering property and -ms-interpolation-mode depending on what you are going for exactly.

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Upvotes: 0

Related Questions