2011-05-25 99 views
10

我注意到,IE9呈現在一個非常低的質量小圖像:如果我在200x150 IMG標籤顯示800x600 jpg圖像,在IE9的結果是非常令人失望。質量差的圖像尺寸在IE9

在IE8和Chrome中,相同的頁面顯示效果非常好。 IE7也行,只要我使用CSS樣式-ms-interpolation-mode: bicubic;)。 Firefox顯示的結果與IE9相同,但這似乎是一個已知的bug,請參閱https://bugzilla.mozilla.org/show_bug.cgi?id=486918

我已經瀏覽了堆棧溢出和其他論壇,但沒有發現IE9渲染與IE8的任何投訴。

有沒有人知道這是IE9中的一個錯誤。有沒有解決方法?

我無法提交圖像,因爲我是堆棧溢出的新用戶。 但可以很容易地重現該問題:

在Paint.Net創建與刷寬度1只或2 顯示一個橢圓。一個800x600.jpg這個圖像中的200像素150像素IMG標籤 比較IE9用鉻和IE8(使用IEtester)

+3

我會考慮客戶端的圖像重新調整一般糟糕的做法。除了瀏覽器之間的渲染差異之外,還會通過下載比所需字節更多的字節來影響性能,然後處理渲染圖像的時間。 – Xint0 2011-05-25 15:27:23

+0

如果您無法直接在帖子中嵌入圖片,您可以隨時將其留在評論中或作爲鏈接,任何具有編輯權限的人都可以爲其編輯 – 2011-05-27 03:30:16

+1

@ Xint0 - 如果您在其他地方顯示較大的圖片,那麼具有不同大小的多個圖像會導致更大的下載量。 – 2012-08-15 14:24:17

回答

2

我已經看過很多與IE和圖像大小調整。實際上,通過圖像編輯器或自動化方式製作單獨的較小版本的確切尺寸會更好。

4

默認即圖像調整大小算法不是很好。當你注意,IE7添加到更改算法的能力:

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

這帶走IE9 according to the docs page,但他們不提供,如果有什麼事情,而不是使用任何信息。如果您可以設法在瀏覽器中調整圖片大小,您將獲得最佳效果。

根據您的使用情況,您可能可以使用具有較新瀏覽器的畫布來獲得更好的結果。在Resizing an image in an HTML5 canvas接受的答案看起來很有前途:)

+0

Thanx爲您的答覆。不幸的是,我的applciation設計暫時阻止了我使用Canvas。所以我會嘗試在服務器上以編程方式調整圖像大小。順便說一句:我注意到這個渲染問題只發生在繪製圖像上。調整大小的照片在IE9中的外觀非常好。 – Koos 2011-05-27 08:18:06

+0

感謝除IE之外的提及,我正在抓我的頭看着IE9中的圖像,直到我讀到它! – ChristoKiwi 2015-09-04 02:37:56