High Resolution Image IE Browser Rendering

html css image resize image-size
GoRivera picture GoRivera · Apr 11, 2012 · Viewed 9.7k times · Source

I am optimizing my site for these higher resolution monitors (especially the new iPad). I have the site formatted the way I want, and I was just increasing the resolution of each image but still constraining it to the DIVs that I currently have. For example, I have an image with a resolution of 483x246 and I have it fitting a DIV with a set size of 188x96.

The images look great on Chrome, Firefox, and most importantly on the new iPad. Even zoomed in it's nice and crisp (as opposed to my old 188x96 image that looked blurry and pixelated when zoomed in)

The problem comes in when I open the page in IE. It displays the image at the correct size but it's jagged. See link to comparison below. I know it's an issue with the way IE resizes and renders pictures on the fly.

My question would be, is there a way to make IE display the picture nicely? If not, is there a way I can put in the code so that if it detects IE, it displays my old low res image? I've looked everywhere but haven't found anything that relates to my specific problem. I know this is a small example but my bigger images do the same thing and are more noticeable. I hope you all can help. Thanks. :)

Comparison: enter image description here

Answer

hcharge picture hcharge · Apr 11, 2012

Have you tried putting this in your CSS?

img { -ms-interpolation-mode: bicubic; }

There's also this https://github.com/adamdbradley/foresight.js which looks very interesting

Make sure IE9 isn't in compatibility mode or IE7/8 mode... IE9 Mode

Related questions

Scale image to fit a bounding box

Is there a css-only solution to scale an image into a bounding box (keeping aspect-ratio)? This works if the image is bigger than the container: img { max-width: 100%; max-height: 100%; } Example: Use case 1 (works): http://jsfiddle.net/Jp5AQ/2/ Use case 2 (works): …

Read More
How can I make all images of different height and width the same via CSS?

I am trying to create an image wall consisting of product photos. Unfortunately, all of them are of different height and width. How can I use css to make all images look the same size? preferably 100 x 100. I was thinking …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More