10

I noticed that IE9 renders downsized images in a very low quality: if I display a 800x600 jpg image in a 200x150 IMG tag, the result in IE9 is very disappointing.

The same page displays perfectly fine in IE8 and in Chrome. IE7 is also OK, provided I use CSS style -ms-interpolation-mode: bicubic;). Firefox shows the same dismal result as IE9 but this seems to be a known bug, see https://bugzilla.mozilla.org/show_bug.cgi?id=486918

I have trawled Stack Overflow and other forums but haven't found any complaints on IE9 rendering versus IE8.

Does anybody know this a bug in IE9. Is there a workaround?

I cannot submit images, because I am a new user on Stack Overflow. But you can easily reproduce the issue:

In Paint.Net create a 800x600.jpg with an ellips with brush-width 1 or 2. Display this image in a 200px by 150px IMG tag Compare IE9 with Chrome and IE8 (using IEtester)

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Koos
  • 289
  • 3
  • 12
  • 3
    I would consider client-side image re-sizing a bad practice in general. Besides the rendering differences between browsers, there's an impact in performance by downloading more bytes than needed and then processing time to render the image. – Xint0 May 25 '11 at 15:27
  • If you are unable to embed an image directly in the post you can always leave it in a comment or as a link, and anybody with editing privileges can edit it in for you – Yi Jiang May 27 '11 at 03:30
  • 1
    @Xint0 - If you're displaying the larger image elsewhere, then having multiple images of different sizes causes larger downloads. – Grim... Aug 15 '12 at 14:24
  • 2
    Sometimes resizing images on the client side can make sense. Say you are making a zero-footprint single page web application with an image viewer in it, and you want to do a zoom operation. It might not be feasible to make the user wait on the client while the image resizes on the server and sends the whole image back. – racingcow Jan 29 '13 at 22:55

2 Answers2

4

The default ie image resize algorithm is not very good. As you note, IE7 added the ability to change the algorithm with:

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

This is taken away in IE9 according to the docs page, but they don't provide any info on what if anything to use instead. If you can manage to resize the image not in the browser you will get the best results that way.

Depending on your use case, you might be able to use a canvas with newer browsers to get better results. The accepted answer in Resizing an image in an HTML5 canvas looks promising :)

Community
  • 1
  • 1
lambacck
  • 9,768
  • 3
  • 34
  • 46
  • Thanx for your replies. Unftunately my applciation design prevents me from using Canvas for the time being. So I will try to resize the image programmatically on the server. By the way: I noticed that this render problem only occurs with drawn images. Resized photo's look really good in IE9. – Koos May 27 '11 at 08:18
  • Thanks for the except IE mention, I was scratching my head looking at an image in IE9 until I read that! – ChristoKiwi Sep 04 '15 at 02:37
2

I've seen this a lot with IE and image resizing. You're honestly better off making a separate smaller version the exact size through an image editor or automated means.

onteria_
  • 68,181
  • 7
  • 71
  • 64